diff options
| -rw-r--r-- | web/nms.gathering.org/nms2/img/tg15-salkart-full.png (renamed from web/nms.gathering.org/nms2/prototype/tg15-salkart-full.png) | bin | 167427 -> 167427 bytes | |||
| -rw-r--r-- | web/nms.gathering.org/nms2/index.html | 8 | ||||
| -rw-r--r-- | web/nms.gathering.org/nms2/js/nms.js | 6 | ||||
| -rw-r--r-- | web/nms.gathering.org/nms2/prototype/test.html | 25 | ||||
| -rw-r--r-- | web/nms.gathering.org/nms2/prototype/test.js | 474 |
5 files changed, 9 insertions, 504 deletions
diff --git a/web/nms.gathering.org/nms2/prototype/tg15-salkart-full.png b/web/nms.gathering.org/nms2/img/tg15-salkart-full.png Binary files differindex 9e22d40..9e22d40 100644 --- a/web/nms.gathering.org/nms2/prototype/tg15-salkart-full.png +++ b/web/nms.gathering.org/nms2/img/tg15-salkart-full.png diff --git a/web/nms.gathering.org/nms2/index.html b/web/nms.gathering.org/nms2/index.html index acfe810..87c375d 100644 --- a/web/nms.gathering.org/nms2/index.html +++ b/web/nms.gathering.org/nms2/index.html @@ -105,7 +105,9 @@ performance (And because it's generally better)</li> <li>Add DHCP map</li> <li>Add magic map (combined map of sorts)</li> - <li>Upgrade jQuery and Boost</li> + <li>Upgrade jQuery and Bootstrap</li> + <li>Add better control panel stuff</li> + <li>Overhaul general UI for a proper bootstrap-approved look.</li> <li>Fix legend display</li> <li>Better dialog-boxes (Both this and various others)</li> <li>Add switch-box to review state on individual ports</li> @@ -113,6 +115,7 @@ <li>More?</li> </ul> <h3>Todo for backend:</h3> + <ul> <li>Fix horrible SQL :D</li> <li>Close SQL injections (IT'S WIDE OPEN BECAUSE WHY NOT THAT'S NEVER A PROBLEM)</li> <li>Fix SNMP-fetcher so it gets ifXTable and at least ifOperStatus from ifTable. Possibly other tweaks.</li> @@ -120,13 +123,14 @@ <li>Integrate with FAP</li> <li>Clean up old interfaces</li> <li>Review various agents/tools</li> + <li>Improve cache headers</li> </ul> </div> <canvas id="myCanvas" width="1920" height="1032" style="cursor: pointer;" onclick="canvasClick(event)"> </canvas> -<div style="display:none;"><img id="source" src="prototype/tg15-salkart-full.png" ></div> +<div style="display:none;"><img id="source" src="img/tg15-salkart-full.png" ></div> </div> </div> diff --git a/web/nms.gathering.org/nms2/js/nms.js b/web/nms.gathering.org/nms2/js/nms.js index 6f51b10..57e3ec6 100644 --- a/web/nms.gathering.org/nms2/js/nms.js +++ b/web/nms.gathering.org/nms2/js/nms.js @@ -14,6 +14,8 @@ var nms = { damage:false, drawText:true, now:false, + fontSize:14, + fontFace:"Arial Black", did_update:false // Set to 'true' after we've done some basic updating }; @@ -24,8 +26,6 @@ var counters = { var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); -var fontSize = 14; -var fontFace = "Arial Black"; var orig = { width:1920, height:1032 @@ -776,7 +776,7 @@ function drawSwitches() function drawScene() { if (nms.damage) { - ctx.font = Math.round(fontSize * canvas.scale) + "px " + fontFace; + ctx.font = Math.round(nms.fontSize * canvas.scale) + "px " + nms.fontFace; if (nms.now != false) { ctx.clearRect(0,0,200,20); ctx.fillStyle = "white"; diff --git a/web/nms.gathering.org/nms2/prototype/test.html b/web/nms.gathering.org/nms2/prototype/test.html deleted file mode 100644 index 7e36f16..0000000 --- a/web/nms.gathering.org/nms2/prototype/test.html +++ /dev/null @@ -1,25 +0,0 @@ -<html> - -<body id="bdy"> -<input type="range" id="scaler" name="points" min="0.5" max="3" step="0.01" onchange="scaleChange()" /><div id="scaler-text">NaN</div> -<input type="button" id="discoMode" onclick="if (discoMode == undefined) discoMode = setInterval(randomizeColors,100);" value="DISCO"></input> -<input type="button" id="nodiscoMode" onclick="if (discoMode != undefined) { clearInterval(discoMode); discoMode = undefined; }" value="Office mode"></input> -<input type="button" id="randomMode" onclick="randomizeColors();" value="Random colors"></input> -<input type="button" id="resetMode" onclick="resetColors();" value="Reset colors"></input> -<input type="button" onclick="hideBorder();" value="Hide border"></input> -<input type="button" onclick="showBorder();" value="Show border"></input> -<input type="button" onclick="setNightMode(true);" value="Enable night mode"></input> -<input type="button" onclick="setNightMode(false);" value="Disable night mode"></input> -<br /> -<canvas id="myCanvas" width="1920" height="1032" style="cursor: pointer; border:1px solid #000000;" onclick="canvasClick(event)"> -</canvas> - -<div style="display:none;"><img id="source" src="tg15-salkart-full.png" ></div> -<script src="test.js"> </script> -<script> -var discoMode = undefined; -window.addEventListener('resize',resizeEvent,true); -document.addEventListener('load',resizeEvent,true); -</script> -</body> -</html> diff --git a/web/nms.gathering.org/nms2/prototype/test.js b/web/nms.gathering.org/nms2/prototype/test.js deleted file mode 100644 index f7a2453..0000000 --- a/web/nms.gathering.org/nms2/prototype/test.js +++ /dev/null @@ -1,474 +0,0 @@ -var c = document.getElementById("myCanvas"); -var ctx = c.getContext("2d"); -var fontSize = 20; -var fontFace = "Arial Black"; -var nightMode = false; -var nightBlur = {}; - -/* "Orig" refers to the oriinal coordinate system. - * - * The short version is: This is the extents of the map, regardless of - * resolution. So if you place something at 1920x1032, it'll be at the very - * corner. If you change "orig", you also have to re-calculate all switch - * placements etc. - */ -var orig = { - width:1920, - height:1032 - }; - -var canvas = { - width:0, - height:0, - scale:1 -}; -var margin = { - x:10, - y:20, - text:3 -}; - -var switches = { - "e3-1": { placement: { x:300,y:200,w:20,h:150} }, - "e5-1": { placement: { x:500,y:200,w:20,h:150} }, - "e7-1": { placement: { x:700,y:200,w:20,h:150} }, - "e9-1": { placement: { x:900,y:200,w:20,h:150} }, - "e3-5": { placement: { x:300,y:500,w:20,h:150} }, - "e5-5": { placement: { x:500,y:500,w:20,h:150} }, - "e7-5": { placement: { x:700,y:500,w:20,h:150} }, - "e9-5": { placement: { x:900,y:500,w:20,h:150} }, - "e11-5": { placement: { x:1100,y:500,w:20,h:150} }, - "distro0": { placement: { x:400,y:415,w:100,h:23} }, - "distro1": { placement: { x:800,y:415,w:100,h:23} }, -}; - -var linknets = [ - {sw1:"e3-1",sw2:"distro0"}, - {sw1:"e5-1",sw2:"distro0"}, - {sw1:"e3-5",sw2:"distro0"}, - {sw1:"e5-5",sw2:"distro0"}, - {sw1:"e7-1",sw2:"distro1"}, - {sw1:"e9-1",sw2:"distro1"}, - {sw1:"e7-5",sw2:"distro1"}, - {sw1:"e9-5",sw2:"distro1"}, - {sw1:"e11-5",sw2:"distro1"}, - {sw1:"distro0",sw2:"distro1"} -] - -/* - * Draw a linknet with index i. - * - * XXX: Might have to change the index here to match backend - */ -function drawLinknet(ln) -{ - var c1 = ln.c1 ? ln.c1 : "blue"; - var c2 = ln.c2 ? ln.c2 : "blue"; - connectSwitches(ln.sw1,ln.sw2, c1, c2); -} - -/* - * Draw all linknets - */ -function drawLinknets() -{ - for (var i in linknets) { - drawLinknet(linknets[i]); - } -} - -/* - * Change both colors of a linknet. - * - * XXX: Probably have to change this to better match the backend data - */ -function setLinknetColors(i,c1,c2) -{ - linknets[i].c1 = c1; - linknets[i].c2 = c2; -} - -/* - * (Re)draw a switch 'sw'. - * - * Color defaults to 'blue' if it's not set in the data structure. - */ -function drawSwitch(sw) -{ - var box = switches[sw]['placement']; - var color = switches[sw]['color']; - if (color == undefined) { - color = "blue"; - } - ctx.fillStyle = color; - if (nightMode && nightBlur[sw] != true) { - ctx.shadowBlur = 10; - ctx.shadowColor = "#99ff99"; - nightBlur[sw] = true; - } else { - ctx.shadowBlur = 0; - ctx.shadowColor = "#000000"; - } - drawBox(box['x'],box['y'],box['w'],box['h']); - ctx.shadowBlur = 0; - if ((box['w'] + 10 )< box['h'] ) - drawSideways(sw,box['x'],box['y'],box['w'],box['h']); - else - drawRegular(sw,box['x'],box['y'],box['w'],box['h']); -} - -/* - * Draw all switches - */ -function drawSwitches() -{ - for (var sw in switches) { - drawSwitch(sw); - } -} - -/* - * Draw foreground/scene. - * - * This is used so linknets are drawn before switches. If a switch is all - * that has changed, we just need to re-draw that, but linknets require - * scene-redrawing. - */ -function drawScene() -{ - drawLinknets(); - drawSwitches(); -} - -/* - * Set the scale factor and (re)draw the scene and background. - * Uses canvas.scale and updates canvas.height and canvas.width. - */ -function setScale() -{ - c.height = canvas.height = orig.height * canvas.scale ; - c.width = canvas.width = orig.width * canvas.scale ; - drawBG(); - nightBlur = {}; - drawScene(); - document.getElementById("scaler").value = canvas.scale; - document.getElementById("scaler-text").innerHTML = (parseFloat(canvas.scale)).toPrecision(3); -} - -/* - * Returns true if the coordinates (x,y) is inside the box defined by - * box.{x,y,w.h} (e.g.: placement of a switch). - */ -function isin(box, x, y) -{ - if ((x >= box.x) && (x <= (box.x + box.w)) && (y >= box.y) && (y <= (box.y + box.h))) { - return true; - } - return false; - -} - -/* - * Return the name of the switch found at coordinates (x,y), or 'undefined' - * if none is found. - */ -function findSwitch(x,y) -{ - x = parseInt(parseInt(x) / canvas.scale); - y = parseInt(parseInt(y) / canvas.scale); - - for (var v in switches) { - if(isin(switches[v]['placement'],x,y)) { - return v; - } - } - return undefined; -} - -/* - * Set switch color of 'sw' to 'c', then re-draw the switch. - */ -function setSwitchColor(sw, c) -{ - switches[sw]['color'] = c; -} - -/* - * Return a random-ish color (for testing) - */ -function getRandomColor() -{ - var c; - var i = Math.round(Math.random() * 5); - if (i < 1) { - c = "white"; - } else if(i < 2) { - c = "red"; - } else if (i < 3) { - c = "pink"; - } else if (i < 4) { - c = "yellow"; - } else if (i < 5) { - c = "orange"; - } else { - c = "green"; - } - return c; -} - -/* - * Helper functions for the front-end testing. - */ -function hideBorder() -{ - c.style.border = ""; -} - -function showBorder() -{ - c.style.border = "1px solid #000000"; -} - -/* - * Event handler for the front-end drag bar to change scale - */ -function scaleChange() -{ - var scaler = document.getElementById("scaler").value; - canvas.scale = scaler; - setScale(); -} - -/* - * Draw a "cross hair" at/around (x,y). - * - * Used for testing. - */ -function crossHair(x,y) -{ - ctx.fillStyle = "yellow"; - ctx.fillRect(x,y,-100,10); - ctx.fillStyle = "red"; - ctx.fillRect(x,y,100,10); - ctx.fillStyle = "blue"; - ctx.fillRect(x,y,10,-100); - ctx.fillStyle = "green"; - ctx.fillRect(x,y,10,100); -} - -/* - * Called when a switch is clicked - */ -function switchClick(sw) -{ - setSwitchColor(sw, "white"); - drawSwitch(sw); -} - -/* - * Testing-function to randomize colors of linknets and switches - */ -function randomizeColors() -{ - for (var i in linknets) { - setLinknetColors(i, getRandomColor(), getRandomColor()); - } - for (var sw in switches) { - setSwitchColor(sw, getRandomColor()); - } - drawScene(); -} - -/* - * Resets the colors of linknets and switches. - * - * Useful when mode changes so we don't re-use colors from previous modes - * due to lack of data or bugs. - */ -function resetColors() -{ - for (var i in linknets) { - setLinknetColors(i, "blue","blue"); - } - for (var sw in switches) { - setSwitchColor(sw, "blue"); - } - drawScene(); -} - -/* - * onclick handler for the canvas - */ -function canvasClick(e) -{ - var sw = findSwitch(e.pageX - e.target.offsetLeft, e.pageY - e.target.offsetTop); - if (sw != undefined) { - switchClick(sw); - } -} - -/* - * Resize event-handler. - * - * Recomputes the scale and applies it. - * - * Has to use c.offset* since we are just scaling the canvas, not - * everything else. - * - */ -function resizeEvent() -{ - var width = window.innerWidth - c.offsetLeft; - var height = window.innerHeight - c.offsetTop; - if (width / (orig.width + margin.x) > height / (orig.height + margin.y)) { - canvas.scale = height / (orig.height + margin.y); - } else { - canvas.scale = width / (orig.width + margin.x); - } - setScale(); -} - -/* - * Draws the background image (scaled). - */ -function drawBG() -{ - var image = document.getElementById('source'); - image.style.webkitFilter = "invert(100%)"; - ctx.drawImage(image, 0, 0, canvas.width, canvas.height); - if (nightMode) { - invertCanvas(); - } -} - -/* - * Enable/disable night mode (ViD better appreciate this) - */ -function setNightMode(toggle) -{ - nightMode = toggle; - var body = document.getElementById("bdy"); - bdy.style.background = toggle ? "black" : "white"; - bdy.style.color = toggle ? "#00FF00" : "black"; - setScale(); -} - -/* - * Draw a box (e.g.: switch). - */ -function drawBox(x,y,boxw,boxh) -{ - var myX = Math.round(x * canvas.scale); - var myY = Math.round(y * canvas.scale); - var myX2 = Math.round((boxw) * canvas.scale); - var myY2 = Math.round((boxh) * canvas.scale); - ctx.fillRect(myX,myY, myX2, myY2); - ctx.lineWidth = Math.round(0.5 * canvas.scale); - if (canvas.scale < 1.0) { - ctx.lineWidth = 0.5; - } - ctx.strokeStyle = "#000000"; - ctx.strokeRect(myX,myY, myX2, myY2); -} - -/* - * Draw text on a box - sideways! - * - * XXX: This is pretty nasty and should also probably take a box as input. - */ -function drawSideways(text,x,y,w,h) -{ - ctx.rotate(Math.PI / 2); - ctx.rotate(Math.PI) - ctx.fillStyle = "white"; - ctx.strokeStyle = "black"; - ctx.lineWidth = Math.round(1 * canvas.scale); - if (canvas.scale < 0.7) { - ctx.lineWidth = 0.5; - } - ctx.font = Math.round(fontSize * canvas.scale) + "px " + fontFace; - ctx.fillText(text, - canvas.scale * (y + h - margin.text),canvas.scale * (x + w - margin.text) ); - ctx.strokeText(text, - canvas.scale * (y + h - margin.text),canvas.scale * (x + w - margin.text) ); - - ctx.rotate(Math.PI / 2); -} - -/* - * Draw background inverted (wooo) - * - * XXX: This is broken for chromium on local file system (e.g.: file:///) - * Seems like a chromium bug? - */ -function invertCanvas() -{ - var imageObj = document.getElementById('source'); - ctx.drawImage(imageObj, 0, 0, c.width, c.height); - var imageData = ctx.getImageData(0, 0, c.width, c.height); - var data = imageData.data; - - for(var i = 0; i < data.length; i += 4) { - data[i] = 255 - data[i]; - data[i + 1] = 255 - data[i + 1]; - data[i + 2] = 255 - data[i + 2]; - } - ctx.putImageData(imageData, 0, 0); -} - -/* - * Draw regular text on a box. - * - * Should take the same format as drawSideways() - * - * XXX: Both should be renamed to have 'text' or something in them - */ -function drawRegular(text,x,y,w,h) -{ - ctx.fillStyle = "white"; - ctx.strokeStyle = "black"; - ctx.lineWidth = Math.round(1 * canvas.scale); - if (canvas.scale < 0.7) { - ctx.lineWidth = 0.5; - } - ctx.font = Math.round(fontSize * canvas.scale) + "px " + fontFace; - ctx.fillText(text, (x + margin.text) * canvas.scale, (y + h - margin.text) * canvas.scale); - ctx.strokeText(text, (x + margin.text) * canvas.scale, (y + h - margin.text) * canvas.scale); -} - -/* - * Draw a line between switch "insw1" and "insw2", using a gradiant going - * from color1 to color2. - * - * XXX: beginPath() and closePath() is needed to avoid re-using the - * gradient/color - */ -function connectSwitches(insw1, insw2,color1, color2) -{ - var sw1 = switches[insw1].placement; - var sw2 = switches[insw2].placement; - if (color1 == undefined) - color1 = "blue"; - if (color2 == undefined) - color2 = "blue"; - var x0 = Math.round((sw1.x + sw1.w/2) * canvas.scale); - var y0 = Math.round((sw1.y + sw1.h/2) * canvas.scale); - var x1 = Math.round((sw2.x + sw2.w/2) * canvas.scale); - var y1 = Math.round((sw2.y + sw2.h/2) * canvas.scale); - var gradient = ctx.createLinearGradient(x1,y1,x0,y0); - gradient.addColorStop(0, color1); - gradient.addColorStop(1, color2); - ctx.beginPath(); - ctx.strokeStyle = gradient - ctx.moveTo(x0,y0); - ctx.lineTo(x1,y1); - ctx.lineWidth = Math.round(2 * canvas.scale); - ctx.closePath(); - ctx.stroke(); - ctx.moveTo(0,0); -} - -function debugIt(e) -{ - console.log("Debug triggered"); - console.log(e); -} - |
