NMSjs: Massive rework of map drawing

Still half-way done, but it's looking better.

Confirmed working right now: Comment spotter and disco.

1 files changed, 265 insertions, 0 deletions

diff --git a/web/nms.gathering.org/js/nms-map.js b/web/nms.gathering.org/js/nms-map.js
new file mode 100644
index 0000000..69a76e0
--- /dev/null
+++ b/web/nms.gathering.org/js/nms-map.js
@@ -0,0 +1,265 @@
+"use strict";
+
+/* WORK
+ * IN
+ * PROGRESS
+ *
+ * Interface:
+ *
+ * nmsMap.init() - start things up
+ * nmsMap.setSwitchColor(switch,color)
+ * nmsMap.setSwitchInfo(switch,info)
+ */
+
+
+var nmsMap = nmsMap || {
+	stats: {
+		earlyDrawAll:0,
+		colorChange:0,
+		colorSame:0,
+		resizeEvents:0,
+		switchInfoUpdate:0,
+		switchInfoSame:0
+	},
+	contexts: ["bg","link","blur","switch","text","textInfo","top","input","hidden"],
+	_info: {},
+	_settings: {
+		fontLineFactor: 3,
+		textMargin: 3,
+		xMargin: 10,
+		yMargin: 20
+	},
+	scale: 1,
+	_orig: { width:1920, height:1032 },
+	_canvas: {
+		get width() { return nmsMap.scale * nmsMap._orig.width; },
+		get height() { return nmsMap.scale * nmsMap._orig.height; }
+	},
+
+	_color: { },
+	_c: {}
+}
+
+nmsMap.init = function() {
+	this._initContexts();
+	this._drawBG();
+	nmsData.registerSource("switches","/api/public/switches",function(){nmsMap._drawAllSwitches();});
+	window.addEventListener('resize',nmsMap._resizeEvent,true);
+	document.addEventListener('load',nmsMap._resizeEvent,true);
+	this._drawAllSwitches();
+}
+
+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.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')
+			continue;
+		nmsMap._c[a].c.height = nmsMap._canvas.height;
+		nmsMap._c[a].c.width = nmsMap._canvas.width;
+	}
+	nmsMap._drawBG();
+	nmsMap._drawAllSwitches();
+	nmsMap.stats.resizeEvents++;
+}
+
+nmsMap.setNightMode = function(toggle) {
+	if (this._nightmode == toggle)
+		return;
+	this._nightmode = toggle;
+	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._drawSwitch = function(sw)
+{
+	var box = this._getBox(sw);
+	var color = nmsMap._color[sw];
+	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._drawSidewaysText(this._c.text.ctx, sw,box);
+	/*
+		if ((box['width'] + 10 )< box['height']) {
+			//
+		} else {
+			//drawRegular(dr.text.ctx,sw,box['x'],box['y'],box['width'],box['height']);
+		}
+	*/
+}
+
+nmsMap._drawSwitchInfo = function(sw) {
+	var box = this._getBox(sw);
+	if (this._info[sw] == undefined) {
+		this._clearBox(this._c.textInfo.ctx, box);
+	} else {
+		this._drawSidewaysText(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._drawSidewaysText = function(ctx, text, box, align) {
+	this._clearBox(ctx,box);
+	ctx.save();
+	ctx.scale(this.scale, this.scale); // FIXME: Do it everywhere?
+	ctx.lineWidth = Math.floor(nmsMap._settings.fontLineFactor);
+	if (ctx.lineWidth == 0) {
+		ctx.lineWidth = Math.round(nms._settings.fontLineFactor);
+	}
+	ctx.fillStyle = "white";
+	ctx.strokeStyle = "black";
+	ctx.translate(box.x + box.width - this._settings.textMargin, box.y + box.height - this._settings.textMargin);
+	ctx.rotate(Math.PI * 3/2);
+	if (align == "right") {
+		ctx.textAlign = "right";
+		/*
+		 * Margin*2 is to compensate for the margin above.
+		 */
+		ctx.translate(box.height - this._settings.textMargin*2,0);
+	}
+	ctx.strokeText(text, 0, 0);
+	ctx.fillText(text, 0, 0);
+	ctx.restore();
+}
+
+nmsMap._drawAllSwitches = function() {
+	if (nmsData.switches == undefined) {
+		this.stats.earlyDrawAll++;
+		return;
+	}
+	for (var sw in nmsData.switches.switches) {
+		this._drawSwitch(sw);
+	}
+}
+
+nmsMap._drawBox = function(ctx, x, y, boxw, boxh) {
+	ctx.save();
+	ctx.scale(this.scale, this.scale); // FIXME
+	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.moveTo(x0,y0);
+	ctx.lineTo(x1,y1); 
+	ctx.lineWidth = 5;
+	ctx.stroke();
+	ctx.restore();
+}