From b7c677154d8243599daf0051ba8dafb3fe1de9d6 Mon Sep 17 00:00:00 2001
From: Kristian Lyngstol <kristian@bohemians.org>
Date: Tue, 5 May 2015 08:40:54 +0200
Subject: iNMS: Minor visibility tweaks for tablets :wq

NANO!? GAH!
---
 web/nms.gathering.org/index.html      |  2 +-
 web/nms.gathering.org/nms2/index.html | 38 +++++++++++++----------------------
 web/nms.gathering.org/nms2/js/nms.js  | 11 +++++++---
 3 files changed, 23 insertions(+), 28 deletions(-)

(limited to 'web')

diff --git a/web/nms.gathering.org/index.html b/web/nms.gathering.org/index.html
index ffcb09b..8043c7d 100644
--- a/web/nms.gathering.org/index.html
+++ b/web/nms.gathering.org/index.html
@@ -6,7 +6,7 @@
     <p>tg light &amp; magic. :-)</p>
 
     <ul>
-      <li><a href="nms2/map.html">NMS 2 NG (Ping, Temp, Uplink, Trafikk, Info)</a>
+      <li><a href="nms2/">NMS 2 NG (Ping, Temp, Uplink, Trafikk, Info)</a>
     	<br /><i>Trykk på svitsjene (Work in progress)</i>
 	</li>
 	<br />
diff --git a/web/nms.gathering.org/nms2/index.html b/web/nms.gathering.org/nms2/index.html
index 304cece..6c0576f 100644
--- a/web/nms.gathering.org/nms2/index.html
+++ b/web/nms.gathering.org/nms2/index.html
@@ -46,12 +46,11 @@
 	    <span class="icon-bar"></span>
 	    <span class="icon-bar"></span>
 	  </button>
-	  <a class="navbar-brand" onclick="toggleLayer('aboutBox'); //document.getElementById('aboutBox').style.display = 'block'; hideSwitch();" style="cursor: pointer;" >NMS</a>
 	</div>
 	<div id="navbar" class="navbar-collapse collapse">
 	  <ul class="nav navbar-nav">
 	    <li class="dropdown">
-	      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Map mode
+	      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Menu
 		<span class="caret"></span>
 	      </a>
 	      <ul class="dropdown-menu" role="menu">
@@ -66,45 +65,36 @@
 		<li><a href="#" onclick="toggleLayer('nowPickerBox');document.getElementById('nowPicker').focus();">Travel in time</a></li>
 		<li><a href="#" onclick="startReplay();" title="Replay from opening 120 minutes per second">Replay TG</a></li>
 		<li class="divider"> </li>
-		<li><a onclick="showTimerDebug(); hideSwitch();" style="cursor: pointer;" >Debug timers</a></li>
-	      </ul>
-	    </li>
-	    <li class="dropdown">
-	      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">View<span class="caret"></span></a>
-	      <ul class="dropdown-menu" role="menu">
+		<li class="dropdown-header">View</li>
 		<li><a href="#" onclick="toggleNightMode()">Toggle Night Mode</a></li>
 		<li><a href="#" onclick="showBlurBox()">Tweak Night Mode blur</a></li>
 		<li><a href="#" onclick='showLayer("layerVisibility");'>Set layer visibility</a></li>
 		<li class="divider"> </li>
 		<li class="dropdown-header">Map scale</li>
 		<li><a href="#"><label id="scaler-text" for='scaler'></label><input type="range" id="scaler" name="points" min="0.2" max="3" step="0.01" onchange="scaleChange()" /></a></li>
+		<li class="divider"> </li>
+		<li class="dropdown-header">Help</li>
+		<li><a href="#" onclick="toggleLayer('aboutData');">About TG15 data</a></li>
+	  	<li><a href="#" onclick="toggleLayer('aboutBox');" >About NMS</a></li>
+	  	<li><a href="#" onclick="toggleLayer('aboutPerformance');" >About Performance</a></li>
+	  	<li><a href="#" onclick="toggleLayer('aboutKeybindings');" >Keyboard Shortcuts</a></li>
+		<li><a onclick="showTimerDebug(); hideSwitch();" style="cursor: pointer;" >Debug timers</a></li>
 	      </ul>
 	    </li>
 	    <li><p id="updater_name" class="navbar-text"></p></li>
 	    <div class="navbar-form navbar-left">
 	      <div class="form-group">
-		<button class="btn btn-default" id="legend-1"></button>
-		<button class="btn btn-default" id="legend-2"></button>
-		<button class="btn btn-default" id="legend-3"></button>
-		<button class="btn btn-default" id="legend-4"></button>
-		<button class="btn btn-default" id="legend-5"></button>
+		<button class="btn btn-default btn-xs" id="legend-1"></button>
+		<button class="btn btn-default btn-xs" id="legend-2"></button>
+		<button class="btn btn-default btn-xs" id="legend-3"></button>
+		<button class="btn btn-default btn-xs" id="legend-4"></button>
+		<button class="btn btn-default btn-xs" id="legend-5"></button>
 	      </div>
 	    </div>
 	    </li>
 	  </ul>
 	  <ul class="nav navbar-nav navbar-right">
 	    <li><p id="speed" class="navbar-text" title="Client port speed / Total port speed"></p></li>
-	    <li class="dropdown">
-	      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Help
-		<span class="caret"></span>
-	      </a>
-	      <ul class="dropdown-menu" role="menu">
-		<li><a href="#" onclick="toggleLayer('aboutData');">About TG15 data</a></li>
-	  	<li><a href="#" onclick="toggleLayer('aboutBox');" >About NMS</a></li>
-	  	<li><a href="#" onclick="toggleLayer('aboutPerformance');" >About Performance</a></li>
-	  	<li><a href="#" onclick="toggleLayer('aboutKeybindings');" >Keyboard Shortcuts</a></li>
-	      </ul>
-	    </li>
 	  </ul>
 	</div><!--/.nav-collapse -->
       </div>
diff --git a/web/nms.gathering.org/nms2/js/nms.js b/web/nms.gathering.org/nms2/js/nms.js
index d4cf4e8..6fcf07c 100644
--- a/web/nms.gathering.org/nms2/js/nms.js
+++ b/web/nms.gathering.org/nms2/js/nms.js
@@ -932,8 +932,8 @@ function updateSpeed()
 	nms.speed = speed_in;
 	nms.speed_full = speed_full;
 	if (speedele) {
-		speedele.innerHTML = byteCount(8 * parseInt(nms.speed)) + "bit/s";
-		speedele.innerHTML += " / " + byteCount(8 * parseInt(nms.speed_full)) + "bit/s";
+		speedele.innerHTML = byteCount(8 * parseInt(nms.speed)) + "b/s";
+		speedele.innerHTML += " / " + byteCount(8 * parseInt(nms.speed_full)) + "b/s";
 
 	}
 }
@@ -1096,6 +1096,11 @@ function setScale()
 	canvas.height =  orig.height * canvas.scale ;
 	canvas.width = orig.width * canvas.scale ;
 	for (var a in dr) {
+		/*
+		 * Resizing this to a too small size breaks gradients on smaller screens.
+		 */
+		if (a == 'hidden')
+			continue;
 		dr[a].c.height = canvas.height;
 		dr[a].c.width = canvas.width;
 	}
@@ -1397,7 +1402,7 @@ 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, 500, "Time machine", "Handler used to change time");
+	nms.timers.replay = new nmsTimer(timeReplay, 1000, "Time machine", "Handler used to change time");
 	detectHandler();
 	updatePorts();
 	updatePing();
-- 
cgit v1.2.3


From 99bde7c69fb4adf34bfa5450293aec995bc7cb74 Mon Sep 17 00:00:00 2001
From: Kristian Lyngstol <kristian@bohemians.org>
Date: Thu, 7 May 2015 17:38:46 +0200
Subject: NMS: Add info-text for temperature map

This can also be used by other updaters. It doesn't look particularly good
on "small" switches though....
---
 web/nms.gathering.org/nms2/index.html             |   8 ++
 web/nms.gathering.org/nms2/js/nms-map-handlers.js |   3 +
 web/nms.gathering.org/nms2/js/nms.js              | 117 ++++++++++++++++------
 3 files changed, 100 insertions(+), 28 deletions(-)

(limited to 'web')

diff --git a/web/nms.gathering.org/nms2/index.html b/web/nms.gathering.org/nms2/index.html
index 6c0576f..81f68e5 100644
--- a/web/nms.gathering.org/nms2/index.html
+++ b/web/nms.gathering.org/nms2/index.html
@@ -483,6 +483,13 @@
 		  <button onclick='showLayer("textCanvas");'>Show</button>
 		</td>
 	      </tr>
+	      <tr>
+		<td>TextInfo</td>
+		<td>
+		  <button onclick='hideLayer("textInfoCanvas");'>Hide</button>
+		  <button onclick='showLayer("textInfoCanvas");'>Show</button>
+		</td>
+	      </tr>
 	      <tr>
 		<td>Timestamp</td>
 		<td>
@@ -499,6 +506,7 @@
 	<canvas id="blurCanvas" width="1920" height="1032" style="position: absolute; z-index: 20;"> </canvas>
 	<canvas id="switchCanvas" width="1920" height="1032" style="position: absolute; z-index: 30;"> </canvas>
 	<canvas id="textCanvas" width="1920" height="1032" style="position: absolute; z-index: 40;"> </canvas>
+	<canvas id="textInfoCanvas" width="1920" height="1032" style="position: absolute; z-index: 45;"> </canvas>
 	<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>
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 9b2d44c..ddb50a1 100644
--- a/web/nms.gathering.org/nms2/js/nms-map-handlers.js
+++ b/web/nms.gathering.org/nms2/js/nms-map-handlers.js
@@ -232,11 +232,14 @@ function tempUpdater()
 {
 	for (sw in nms.switches_now["switches"]) {
 		var t = "white";
+		var temp = "";
 		if (nms.switches_now["switches"][sw]["temp"]) {
 			t = temp_color(nms.switches_now["switches"][sw]["temp"]);
+			temp = nms.switches_now["switches"][sw]["temp"] + "°C";
 		}
 		
 		setSwitchColor(sw, t);
+		switchInfoText(sw, temp);
 	}
 }
 
diff --git a/web/nms.gathering.org/nms2/js/nms.js b/web/nms.gathering.org/nms2/js/nms.js
index 6fcf07c..30d6ba8 100644
--- a/web/nms.gathering.org/nms2/js/nms.js
+++ b/web/nms.gathering.org/nms2/js/nms.js
@@ -7,6 +7,8 @@ var nms = {
 	ping_data:undefined, // JSON data for ping history.
 	drawn:false, // Set to 'true' when switches are drawn
 	switch_showing:"", // Which switch we are displaying (if any).
+	switchInfo:{},
+	switchInfoDrawn:{},
 	repop_switch:false, // True if we need to repopulate the switch info when port state updates (e.g.: added comments);
 	repop_time:false, // Timestamp in case we get a cached result
 	nightMode:false, 
@@ -23,7 +25,8 @@ var nms = {
 	textDrawn:{}, // Have we drawn text for this switch?
 	now:false, // Date we are looking at (false for current date).
 	fontSize:16, // This is scaled too, but 16 seems to make sense.
-	fontFace:"Arial Black",
+	fontFace:"Verdana",
+	fontLineFactor:3,
 	/*
 	 * This is used to track outbound AJAX requests and skip updates if
 	 * we have too many outstanding requests. The ajaxOverflow is a
@@ -203,6 +206,9 @@ function initDrawing() {
 	dr['text'] = {};
 	dr['text']['c'] = document.getElementById("textCanvas");
 	dr['text']['ctx'] = dr['text']['c'].getContext('2d');
+	dr['textInfo'] = {};
+	dr['textInfo']['c'] = document.getElementById("textInfoCanvas");
+	dr['textInfo']['ctx'] = dr['textInfo']['c'].getContext('2d');
 	dr['top'] = {};
 	dr['top']['c'] = document.getElementById("topCanvas");
 	dr['top']['ctx'] = dr['top']['c'].getContext('2d');
@@ -649,6 +655,7 @@ function setUpdater(fo)
 {
 	nms.updater = undefined;
 	resetColors();
+	resetTextInfo();
 	fo.init();
 	nms.updater = fo;
 	var foo = document.getElementById("updater_name");
@@ -1008,10 +1015,11 @@ function drawSwitch(sw)
 		drawBox(box['x'],box['y'],box['width'],box['height']);
 		dr.switch.ctx.shadowBlur = 0;
 		if (!nms.textDrawn[sw]) {
-			if ((box['width'] + 10 )< box['height'])
-				drawSideways(sw,box['x'],box['y'],box['width'],box['height']);
-			else
-				drawRegular(sw,box['x'],box['y'],box['width'],box['height']);
+			if ((box['width'] + 10 )< box['height']) {
+				drawSideways(dr.text.ctx, sw,box['x'],box['y'],box['width'],box['height']);
+			} else {
+				drawRegular(dr.text.ctx,sw,box['x'],box['y'],box['width'],box['height']);
+			}
 			
 			nms.textDrawn[sw] = true;
 		}
@@ -1046,6 +1054,15 @@ function drawSwitches()
 	}
 	nms.drawn = true;
 }
+function drawSwitchInfo()
+{
+	if (!nms.switches_now || !nms.switches_now.switches)
+		return;
+	for (var sw in nms.switchInfo) {
+		switchInfoText(sw, nms.switchInfo[sw]);
+	}
+	nms.drawn = true;
+}
 
 /*
  * Draw current time-window
@@ -1063,9 +1080,9 @@ function drawNow()
 	dr.top.ctx.clearRect(0,0,Math.floor(800 * canvas.scale),Math.floor(100 * canvas.scale));
 	dr.top.ctx.fillStyle = "white";
 	dr.top.ctx.strokeStyle = "black";
-	dr.top.ctx.lineWidth = Math.floor(2 * canvas.scale);
+	dr.top.ctx.lineWidth = Math.floor(nms.fontLineFactor * canvas.scale);
 	if (dr.top.ctx.lineWidth == 0) {
-		dr.top.ctx.lineWidth = Math.round(2 * canvas.scale);
+		dr.top.ctx.lineWidth = Math.round(nms.fontLineFactor * canvas.scale);
 	}
 	dr.top.ctx.strokeText(now, 0 + margin.text, 25 * canvas.scale);
 	dr.top.ctx.fillText(now, 0 + margin.text, 25 * canvas.scale);
@@ -1083,8 +1100,10 @@ function drawNow()
 function drawScene()
 {
 	dr.text.ctx.font = Math.floor(nms.fontSize * canvas.scale) + "px " + nms.fontFace;
+	dr.textInfo.ctx.font = Math.floor(nms.fontSize * canvas.scale) + "px " + nms.fontFace;
 	drawLinknets();
 	drawSwitches();
+	drawSwitchInfo();
 }
 
 /*
@@ -1106,6 +1125,7 @@ function setScale()
 	}
 	nms.nightBlur = {};
 	nms.textDrawn = {};
+	nms.switchInfoDrawn = {};
 	if (nms.gradients)
 		drawGradient(nms.gradients);
 	drawBG();
@@ -1197,6 +1217,15 @@ function resetColors()
 	}
 }
 
+function resetTextInfo()
+{
+	if (!nms.switches_now)
+		return;
+	for (var sw in nms.switches_now.switches) {
+		switchInfoText(sw, undefined);
+	}
+
+}
 /*
  * onclick handler for the canvas.
  *
@@ -1264,6 +1293,26 @@ function setNightMode(toggle) {
 	}
 	setScale();
 }
+
+function switchInfoText(sw, text)
+{
+	var box = nms.switches_now['switches'][sw]['placement'];
+	var c = canvas.scale;
+	if (nms.switchInfo[sw] == text && nms.switchInfoDrawn[sw]) {
+		return;
+	}
+	nms.switchInfo[sw] = text;
+	nms.switchInfoDrawn[sw] = true;
+	dr.textInfo.ctx.clearRect(c* box['x'], c*box['y'], c*box['width'], c*box['height']);
+	if (text != undefined && text != "") {
+		if ((box['width'] + 10 )< box['height']) {
+			drawSideways(dr.textInfo.ctx, text,box['x'],box['y'],box['width'],box['height'],"end");
+		} else {
+			drawRegular(dr.textInfo.ctx, text,box['x'],box['y'],box['width'],box['height'],"end");
+		}
+	}
+}
+
 /*
  * Draw a box (e.g.: switch).
  */
@@ -1274,9 +1323,9 @@ function drawBox(x,y,boxw,boxh)
 	var myX2 = Math.floor((boxw) * canvas.scale);
 	var myY2 = Math.floor((boxh) * canvas.scale);
 	dr.switch.ctx.fillRect(myX,myY, myX2, myY2);
-	dr.switch.ctx.lineWidth = Math.floor(0.5 * canvas.scale);
+	dr.switch.ctx.lineWidth = Math.floor(1.0 * canvas.scale);
 	if (canvas.scale < 1.0) {
-		dr.switch.ctx.lineWidth = 0.5;
+		dr.switch.ctx.lineWidth = 1.0;
 	}
 	dr.switch.ctx.strokeStyle = "#000000";
 	dr.switch.ctx.strokeRect(myX,myY, myX2, myY2);
@@ -1298,19 +1347,25 @@ function drawBoxBlur(x,y,boxw,boxh)
  *
  * XXX: This is pretty nasty and should also probably take a box as input.
  */
-function drawSideways(text,x,y,w,h)
+function drawSideways(ctx,text,x,y,w,h,align)
 {
-	dr.text.ctx.rotate(Math.PI * 3 / 2);
-	dr.text.ctx.fillStyle = "white";
-	dr.text.ctx.strokeStyle = "black";
-	dr.text.ctx.lineWidth = Math.floor(3 * canvas.scale);
-	if (dr.text.ctx.lineWidth == 0) {
-		dr.text.ctx.lineWidth = Math.round(3 * canvas.scale);
+	ctx.rotate(Math.PI * 3 / 2);
+	ctx.fillStyle = "white";
+	ctx.strokeStyle = "black";
+	if (align == "end") {
+		ctx.textAlign = align;
+		y = y-h + margin.text*2;
+	} else {
+		ctx.textAlign = "start";
+	}
+	ctx.lineWidth = Math.floor(nms.fontLineFactor * canvas.scale);
+	if (ctx.lineWidth == 0) {
+		ctx.lineWidth = Math.round(nms.fontLineFactor * canvas.scale);
 	}
-	dr.text.ctx.strokeText(text, - canvas.scale * (y + h - margin.text),canvas.scale * (x + w - margin.text) );
-	dr.text.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.fillText(text, - canvas.scale * (y + h - margin.text),canvas.scale * (x + w - margin.text) );
 
-	dr.text.ctx.rotate(Math.PI / 2);
+	ctx.rotate(Math.PI / 2);
 }
 
 /*
@@ -1341,16 +1396,22 @@ function invertCanvas() {
  *
  * XXX: Both should be renamed to have 'text' or something in them
  */
-function drawRegular(text,x,y,w,h) {
-
-	dr.text.ctx.fillStyle = "white";
-	dr.text.ctx.strokeStyle = "black";
-	dr.text.ctx.lineWidth = Math.floor(3 * canvas.scale);
-	if (dr.text.ctx.lineWidth == 0) {
-		dr.text.ctx.lineWidth = Math.round(3 * canvas.scale);
+function drawRegular(ctx,text,x,y,w,h,align) {
+
+	ctx.fillStyle = "white";
+	ctx.strokeStyle = "black";
+	ctx.lineWidth = Math.floor(nms.fontLineFactor * canvas.scale);
+	if (align == "end") {
+		ctx.textAlign = align;
+		x = x+w - margin.text*2;
+	} else {
+		ctx.textAlign = "start";
+	}
+	if (ctx.lineWidth == 0) {
+		ctx.lineWidth = Math.round(nms.fontLineFactor * canvas.scale);
 	}
-	dr.text.ctx.strokeText(text, (x + margin.text) * canvas.scale, (y + h - margin.text) * canvas.scale);
-	dr.text.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);
+	ctx.fillText(text, (x + margin.text) * canvas.scale, (y + h - margin.text) * canvas.scale);
 }
 
 /*
-- 
cgit v1.2.3