diff options
Diffstat (limited to 'web/nms.gathering.org/js/nms-map.js')
| -rw-r--r-- | web/nms.gathering.org/js/nms-map.js | 590 |
1 files changed, 0 insertions, 590 deletions
diff --git a/web/nms.gathering.org/js/nms-map.js b/web/nms.gathering.org/js/nms-map.js deleted file mode 100644 index 224b3db..0000000 --- a/web/nms.gathering.org/js/nms-map.js +++ /dev/null @@ -1,590 +0,0 @@ -"use strict"; - -/* WORK - * IN - * PROGRESS - * - * Interface: - * - * nmsMap.init() - start things up - * nmsMap.setSwitchColor(switch,color) - * nmsMap.setSwitchInfo(switch,info) - * nmsMap.setSwitchHighlight(switch,true/false) - * nmsMap.enableHighlights() - * nmsMap.disableHighlights() - */ - - -var nmsMap = nmsMap || { - _moveInProgress: false, - stats: { - colorChange:0, - colorSame:0, - earlyDrawAll:0, - nowDups:0, - nows:0, - resizeEvents:0, - switchInfoSame:0, - switchInfoUpdate:0, - highlightChange:0 - }, - contexts: ["bg","link","blur","switch","text","textInfo","top","input","hidden"], - _info: {}, - _settings: { - fontLineFactor: 2, - textMargin: 3, - xMargin: 10, - yMargin: 20, - fontSize: 15, - fontFace: "sans-serif" - }, - scale: 1, - _init: true, - _orig: { width:1920, height:1032 }, - _canvas: { - get width() { return nmsMap.scale * nmsMap._orig.width; }, - get height() { return nmsMap.scale * nmsMap._orig.height; } - }, - - _color: { }, - _linknets: {} , - _highlight: { }, - _highlightActive: false, - _c: {} -}; - -nmsMap._loadEvent = function(e) { - nmsMap._init = false; - nmsMap._drawAllSwitches(); -}; - -nmsMap.init = function() { - this._initContexts(); - this._init = true; - nmsData.addHandler("switches","nmsMap",function(){nmsMap._resizeEvent();}); - window.addEventListener('resize',nmsMap._resizeEvent,true); - window.addEventListener('load',nmsMap._loadEvent,true); -}; - -nmsMap.setSwitchColor = function(sw, color) { - if (this._color[sw] != color) { - this._color[sw] = color; - this._drawSwitch(sw); - this.stats.colorChange++; - } else { - this.stats.colorSame++; - } -}; - - -nmsMap.setSwitchHighlight = function(sw, highlight) { - if( highlight ) - highlight = true; - if ( this._highlight[sw] != highlight ) { - this.stats.highlightChange++; - this._highlight[sw] = highlight; - } - this._drawSwitch(sw); -}; - - -nmsMap.enableHighlights = function() { - this._highlightActive = true; -}; - - -nmsMap.disableHighlights = function() { - this._highlightActive = false; - this._drawAllSwitches(); -}; - - -nmsMap.reset = function() { - for (var sw in this._color) { - nmsMap.setSwitchColor(sw, undefined); - } - for (var sw in this._info) { - nmsMap.setSwitchInfo(sw, undefined); - } -}; - -nmsMap.setSwitchInfo = function(sw,info) { - if (this._info[sw] != info) { - this._info[sw] = info; - this._drawSwitchInfo(sw); - this.stats.switchInfoUpdate++; - } else { - this.stats.switchInfoSame++; - } -}; - -nmsMap._initContext = function(name) { - this._c[name] = {}; - this._c[name].c = document.getElementById(name + "Canvas"); - this._c[name].ctx = this._c[name].c.getContext('2d'); -}; - -nmsMap._initContexts = function() { - for (var context in this.contexts) { - this._initContext(this.contexts[context]); - } -}; - -nmsMap._resizeEvent = function() { - var width = window.innerWidth - nmsMap._c.bg.c.offsetLeft; - var height = window.innerHeight - nmsMap._c.bg.c.offsetTop; - - var xScale = (width / (nmsMap._orig.width + nmsMap._settings.xMargin)); - var yScale = (height / (nmsMap._orig.height + nmsMap._settings.yMargin)); - - if (xScale > yScale) { - nmsMap.scale = yScale; - } else { - nmsMap.scale = xScale; - } - for (var a in nmsMap._c) { - /* - * Resizing this to a too small size breaks gradients on smaller screens. - */ - if (a == 'hidden' && a != 'blur') - continue; - nmsMap._c[a].c.height = nmsMap._canvas.height; - nmsMap._c[a].c.width = nmsMap._canvas.width; - if(a == 'bg') { - nmsMap._drawBG(); - } - } - if (nmsMap._init != true) { - nmsMap._blurDrawn = false; - nmsMap._drawBG(); - nmsMap._drawAllSwitches(); - nmsMap._drawAllLinknets(); - nmsMap.drawNow(); - nmsMap.stats.resizeEvents++; - } -}; - -/* - * Draw current time-window - * - * FIXME: The math here is just wild approximation and guesswork because - * I'm lazy. - * - * FIXME: 2: Should really just use _drawText() instead somehow. Font size - * being an issue. - * - * FIXME 3: Currently assuming that time from api is UTC and converting to - * local time zone with js. Should find a more robust solution. - * - */ -nmsMap.drawNow = function () -{ - var now = nmsData.now; - if(String(now).indexOf('T') == -1) { //If now does not contain 'T' we assume its in epoch format - now = new Date(nmsData.now * 1000); - } else { - now = new Date(nmsData.now); //Date assumes UTC - } - now = now.toString().split(' ').splice(1,4).join(' '); //Date returns local time - if (nmsMap._lastNow == now) { - nmsMap.stats.nowDups++; - return; - } - nmsMap.stats.nows++; - - var ctx = nmsMap._c.top.ctx; - ctx.save(); - ctx.scale(this.scale, this.scale); - ctx.font = (2 * this._settings.fontSize) + "px " + this._settings.fontFace; - ctx.clearRect(0,0,800,100); - ctx.fillStyle = "white"; - ctx.strokeStyle = "black"; - ctx.lineWidth = nms.fontLineFactor; - ctx.strokeText(now, this._settings.textMargin, 25); - ctx.fillText(now, this._settings.textMargin, 25); - ctx.restore(); -}; - -nmsMap.setNightMode = function(toggle) { - if (this._nightmode == toggle) - return; - this._nightmode = toggle; - if (this._init == true) { - return; - } - if (!toggle) - this._c.blur.c.style.display = "none"; - else { - this._drawAllBlur(); - this._c.blur.c.style.display = ""; - } - nmsMap._drawBG(); -}; - -nmsMap._drawBG = function() { - var imageObj = document.getElementById('source'); - this._c.bg.ctx.drawImage(imageObj, 0, 0, nmsMap._canvas.width, nmsMap._canvas.height); - if(this._nightmode) - nmsMap._invertBG(); -}; - -nmsMap._invertBG = function() { - var imageData = this._c.bg.ctx.getImageData(0, 0, nmsMap._canvas.width, nmsMap._canvas.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]; - } - this._c.bg.ctx.putImageData(imageData, 0, 0); -}; - -nmsMap._getBox = function(sw) { - var box = nmsData.switches.switches[sw]['placement']; - box.x = parseInt(box.x); - box.y = parseInt(box.y); - box.width = parseInt(box.width); - box.height = parseInt(box.height); - return box; -}; - -nmsMap._drawSwitchBlur = function(sw) -{ - if (nmsData.switches == undefined || nmsData.switches.switches == undefined) - return; - var box = this._getBox(sw); - this._c.blur.ctx.save(); - this._c.blur.ctx.fillStyle = "red"; - this._c.blur.ctx.shadowBlur = 30; - this._c.blur.ctx.shadowColor = "white"; - this._c.blur.ctx.scale(this.scale, this.scale); // FIXME <- fix what?! - this._c.blur.ctx.fillRect(box['x'],box['y'],box['width'],box['height']); - this._c.blur.ctx.restore(); -}; - -nmsMap._drawSwitch = function(sw) -{ - // XXX: If a handler sets a color before switches are loaded... The - // color will get set fine so this isn't a problem. - if (nmsData.switches == undefined || nmsData.switches.switches == undefined) - return; - var box = this._getBox(sw); - var color = nmsMap._color[sw]; - if(this._highlightActive) { - if(nmsMap._highlight[sw]) { - color = green; - } else { - color = white; - } - } - if (color == undefined) { - color = blue; - } - this._c.switch.ctx.fillStyle = color; - this._drawBox(this._c.switch.ctx, box['x'],box['y'],box['width'],box['height']); - this._c.switch.ctx.shadowBlur = 0; - this._drawText(this._c.text.ctx, sw,box); - - if(this._info[sw]) - this._drawSwitchInfo(sw); -}; - -nmsMap._drawSwitchInfo = function(sw) { - var box = this._getBox(sw); - if (this._info[sw] == undefined) { - this._clearBox(this._c.textInfo.ctx, box); - } else { - this._drawText(this._c.textInfo.ctx, this._info[sw], box, "right"); - } -}; - -nmsMap._clearBox = function(ctx,box) { - ctx.save(); - ctx.scale(this.scale,this.scale); - ctx.clearRect(box['x'], box['y'], box['width'], box['height']); - ctx.restore(); -}; - -nmsMap._drawText = function(ctx, text, box, align) { - var rotate = false; - - if ((box['width'] + 10 )< box['height']) - rotate = true; - - this._clearBox(ctx,box); - ctx.save(); - ctx.scale(this.scale, this.scale); - ctx.font = "bold " + this._settings.fontSize + "px " + this._settings.fontFace; - ctx.lineWidth = nmsMap._settings.fontLineFactor; - ctx.fillStyle = "white"; - ctx.strokeStyle = "black"; - ctx.translate(box.x + this._settings.textMargin, box.y + box.height - this._settings.textMargin); - - if (rotate) { - ctx.translate(box.width - this._settings.textMargin * 2,0); - ctx.rotate(Math.PI * 3/2); - } - - if (align == "right") { - ctx.textAlign = "right"; - /* - * Margin*2 is to compensate for the margin above. - */ - if (rotate) - ctx.translate(box.height - this._settings.textMargin*2,0); - else - ctx.translate(box.width - this._settings.textMargin*2,0); - } - - ctx.strokeText(text, 0, 0); - ctx.fillText(text, 0, 0); - ctx.restore(); -}; - -nmsMap._setLinknetColor = function(l, color1, color2) -{ - var oldcolor1; - var oldcolor2; - try { - oldcolor1 = nmsMap._linknets[l].sysname1; - oldcolor2 = nmsMap._linknets[l].sysname2; - if (oldcolor1 == color1 && oldcolor2 == color2) { - return ; - } - } catch (e) {} - nmsMap._linknets[l] = {}; - nmsMap._linknets[l].sysname1 = color1; - nmsMap._linknets[l].sysname2 = color2; - nmsMap._drawLinknet(l) -} - -nmsMap._drawLinknet = function(l) { - try { - var color1 = blue; - var color2 = blue; - try { - color1 = nmsMap._linknets[l].sysname1; - color2 = nmsMap._linknets[l].sysname2; - } catch(e) { } - nmsMap._connectSwitches(nmsData.switches.linknets[l].sysname1, nmsData.switches.linknets[l].sysname2, color1, color2); - } catch(e) { } -} - -nmsMap._drawAllLinknets = function() { - for (var l in nmsData.switches.linknets) { - nmsMap._drawLinknet(l); - } -} -nmsMap._drawAllSwitches = function() { - if (nmsData.switches == undefined) { - this.stats.earlyDrawAll++; - return; - } - for (var sw in nmsData.switches.switches) { - this._drawSwitch(sw); - } - if (this._nightmode) - this._drawAllBlur(); -}; - -nmsMap._drawAllBlur = function() { - if (nmsMap._blurDrawn == true) - return; - nmsMap._blurDrawn = true; - for (var sw in nmsData.switches.switches) { - nmsMap._drawSwitchBlur(sw); - } -}; - -nmsMap._drawBox = function(ctx, x, y, boxw, boxh) { - ctx.save(); - ctx.scale(this.scale, this.scale); // FIXME <- what?! - ctx.fillRect(x,y, boxw, boxh); - ctx.lineWidth = 1; - ctx.strokeStyle = "#000000"; - ctx.strokeRect(x,y, boxw, boxh); - ctx.restore(); -}; - -nmsMap._connectSwitches = function(sw1, sw2, color1, color2) { - nmsMap._connectBoxes(this._getBox(sw1), this._getBox(sw2), - color1, color2); -}; - -/* - * Draw a line between two boxes, with a gradient going from color1 to - * color2. - */ -nmsMap._connectBoxes = function(box1, box2,color1, color2) { - var ctx = nmsMap._c.link.ctx; - if (color1 == undefined) - color1 = blue; - if (color2 == undefined) - color2 = blue; - var x0 = Math.floor(box1.x + box1.width/2); - var y0 = Math.floor(box1.y + box1.height/2); - var x1 = Math.floor(box2.x + box2.width/2); - var y1 = Math.floor(box2.y + box2.height/2); - ctx.save(); - ctx.scale(nmsMap.scale, nmsMap.scale); - var gradient = ctx.createLinearGradient(x1,y1,x0,y0); - gradient.addColorStop(0, color1); - gradient.addColorStop(1, color2); - ctx.strokeStyle = gradient; - ctx.beginPath(); - ctx.moveTo(x0,y0); - ctx.lineTo(x1,y1); - ctx.lineWidth = 5; - ctx.stroke(); - ctx.closePath(); - ctx.restore(); -}; - -nmsMap.moveSet = function(toggle) { - nmsMap._moveInProgress = toggle; - if (!toggle) - nmsMap._moveStopListen(); -}; - -/* - * onclick handler for the canvas. - * - * Currently just shows info for a switch. - */ -nmsMap.canvasClick = function(e) -{ - var sw = findSwitch(e.pageX - e.target.offsetLeft, e.pageY - e.target.offsetTop); - if (sw != undefined) { - if (nmsMap._moveInProgress) { - nmsMap._moveStart(sw, e); - } else { - nmsInfoBox.click(sw); - } - } else { - nmsInfoBox.hide(); - } -}; - -nmsMap._clearOld = function(box) { - if (box) { - nmsMap._c.top.ctx.save(); - nmsMap._c.top.ctx.fillStyle = "#000000"; - nmsMap._c.top.ctx.scale(nmsMap.scale, nmsMap.scale); // FIXME - nmsMap._c.top.ctx.clearRect(box['x'] - 5, box['y'] - 5, box['width'] + 10, box['height'] + 10); - nmsMap._c.top.ctx.restore(); - } -}; - -nmsMap._moveMove = function(e) { - nmsMap._moveX = (e.pageX - e.target.offsetLeft) / nmsMap.scale; - nmsMap._moveY = (e.pageY - e.target.offsetTop) / nmsMap.scale; - var diffx = nmsMap._moveX - nmsMap._moveXstart; - var diffy = nmsMap._moveY - nmsMap._moveYstart; - var box = {}; - nmsMap._clearOld(nmsMap._moveOldBox); - box['x'] = nmsMap._moveBox['x'] + diffx; - box['y'] = nmsMap._moveBox['y'] + diffy; - box['height'] = nmsMap._moveBox['height']; - box['width'] = nmsMap._moveBox['width']; - nmsMap._moveOldBox = box; - nmsMap._c.top.ctx.save(); - nmsMap._c.top.ctx.fillStyle = "red"; - nmsMap._drawBox(nmsMap._c.top.ctx, box['x'], box['y'], box['width'], box['height']); - nmsMap._c.top.ctx.restore(); -}; - -nmsMap._moveSubmit = function() { - var data = { - sysname: nmsMap._moving, - placement: nmsMap._moveOldBox - }; - var myData = JSON.stringify([data]); - $.ajax({ - type: "POST", - url: "/api/write/switch-update", - dataType: "text", - data:myData, - success: function (data, textStatus, jqXHR) { - nmsData.invalidate("switches"); - } - }); -}; - -nmsMap._moveStopListen = function() { - nmsMap._c.input.c.removeEventListener('mousemove',nmsMap._moveMove, true); - nmsMap._c.input.c.removeEventListener('mouseup',nmsMap._moveDone, true); -}; - -nmsMap._moveDone = function(e) { - nmsMap._moveStopListen(); - if(nmsMap._moveOldBox == false) { - return; - } - nmsMap._moveSubmit(); - nmsMap._clearOld(nmsMap._moveOldBox); -}; - -nmsMap._moveStart = function(sw, e) -{ - nmsMap._moving = sw; - nmsMap._moveOldBox = false; - nmsMap._moveXstart = (e.pageX - e.target.offsetLeft) / nmsMap.scale; - nmsMap._moveYstart = (e.pageY - e.target.offsetTop) / nmsMap.scale; - nmsMap._moveBox = nmsData.switches.switches[sw].placement; - nmsMap._c.input.c.addEventListener('mousemove',nmsMap._moveMove,true); - nmsMap._c.input.c.addEventListener('mouseup',nmsMap._moveDone,true); -}; - - -/* - * STUFF NOT YET INTEGRATED, BUT MOVED AWAY FROM nms.js TO TIDY. - * - * Consider this a TODO list. - */ - -/* - * Draw a linknet with index i. - * - * XXX: Might have to change the index here to match backend - */ -function drawLinknet(i) -{ - var c1 = nms.linknet_color[i] && nms.linknet_color[i].c1 ? nms.linknet_color[i].c1 : blue; - var c2 = nms.linknet_color[i] && nms.linknet_color[i].c2 ? nms.linknet_color[i].c2 : blue; - if (nmsData.switches.switches[nmsData.switches.linknets[i].sysname1] && nmsData.switches.switches[nmsData.switches.linknets[i].sysname2]) { - connectSwitches(nmsData.switches.linknets[i].sysname1,nmsData.switches.linknets[i].sysname2, c1, c2); - } -} - -/* - * Draw all linknets - */ -function drawLinknets() -{ - if (nmsData.switches && nmsData.switches.linknets) { - for (var i in nmsData.switches.linknets) { - drawLinknet(i); - } - } -} - -/* - * Change both colors of a linknet. - * - * XXX: Probably have to change this to better match the backend data - */ -function setLinknetColors(i,c1,c2) -{ - if (!nms.linknet_color[i] || - nms.linknet_color[i].c1 != c1 || - nms.linknet_color[i].c2 != c2) { - if (!nms.linknet_color[i]) - nms.linknet_color[i] = {}; - nms.linknet_color[i]['c1'] = c1; - nms.linknet_color[i]['c2'] = c2; - drawLinknet(i); - } -} - - |