NMS: Improved TV-mode default view and options

Removed menubar by default, hid time info, added bigger map description
and bigger legend-bar.

New options:
nightmode: 1 or 0 - Turns nightmode on or off
vertical: 0 or 1 - Rotates text for rotated displays

2 files changed, 99 insertions, 11 deletions

diff --git a/web/nms.gathering.org/index.html b/web/nms.gathering.org/index.html
index 3fec2d6..af7776d 100644
--- a/web/nms.gathering.org/index.html
+++ b/web/nms.gathering.org/index.html
@@ -39,6 +39,51 @@
 				tr.mgmt_v4_addr {
 					font-weight: 700;
 				}
+				h1.map-mode-title {
+					font-weight: 700;
+					font-size: 55px;
+					color: black;
+					display: none;
+					z-index: 999;
+				}
+				.vertical h1.map-mode-title {
+					left: 30px;
+					bottom: 0px;
+					position: absolute;
+					transform-origin: 0px 0% 0px;
+					transform: rotate(-90deg);
+				}
+				.tvmode h1.map-mode-title {
+					display: block;
+				}
+				.nightmode h1.map-mode-title {
+					color: white;
+				}
+				.tvmode #topCanvas {
+					display: none;
+				}
+				div.map-mode-legend {
+					display: none;
+					position: fixed;
+					bottom: 5%;
+					right: 5%;
+					z-index: 999;
+				}
+				.vertical div.map-mode-legend {
+					top: -10px;
+					right: 30px;
+					position: absolute;
+					transform-origin: 100% 100% 0;
+					transform: rotate(-90deg);
+					height: 40px;
+				}
+				div.map-mode-legend button {
+					font-size: 20px;
+					font-weight: 700;
+				}
+				.tvmode div.map-mode-legend {
+					display: block;
+				}
       </style>
   </head>
 
@@ -253,6 +298,14 @@
 	  </div>
 	</div>
 
+	<h1 id="map-mode-title" class="map-mode-title"></h1>
+	<div class="map-mode-legend form-group">
+		<button class="btn btn-default btn-sm" id="tv-mode-legend-1"></button>
+		<button class="btn btn-default btn-sm" id="tv-mode-legend-2"></button>
+		<button class="btn btn-default btn-sm" id="tv-mode-legend-3"></button>
+		<button class="btn btn-default btn-sm" id="tv-mode-legend-4"></button>
+		<button class="btn btn-default btn-sm" id="tv-mode-legend-5"></button>
+	</div>
 	<canvas id="bgCanvas" width="1920" height="1032" style="position: absolute; z-index: 1;"> </canvas>
 	<canvas id="linkCanvas" width="1920" height="1032" style="position: absolute; z-index: 10; display: none;"> </canvas>
 	<canvas id="blurCanvas" width="1920" height="1032" style="position: absolute; z-index: 20;"> </canvas>
diff --git a/web/nms.gathering.org/js/nms.js b/web/nms.gathering.org/js/nms.js
index 99c42cf..0c4790c 100644
--- a/web/nms.gathering.org/js/nms.js
+++ b/web/nms.gathering.org/js/nms.js
@@ -66,7 +66,9 @@ var nms = {
 		currentIndex: 0,
 		interval: 20000,
 		hideMenu: false,
-		nightMode: false
+		active: false,
+		nightMode: false,
+		vertical: false
 	}
 };
 
@@ -321,7 +323,11 @@ function getNowEpoch() {
  */
 function setLegend(x,color,name)
 {
-	var el = document.getElementById("legend-" + x);
+	if(nms.tvmode.active) {
+		var el = document.getElementById("tv-mode-legend-" + x);
+	} else {
+		var el = document.getElementById("legend-" + x);
+	}
 	el.style.background = color;
 	el.title = name;
 	el.textContent = name;
@@ -333,12 +339,7 @@ function setLegend(x,color,name)
  * Loops trough a list of views/updaters at a set interval.
  * Arguments: array of views, interval in seconds, use nightmode, hide menus
  */
-nms.tvmode.start = function(views,interval,nightMode,hideMenus) {
-	if(interval > 0)
-		nms.tvmode.interval = interval * 1000;
-	setNightMode(nightMode);
-	if(nms.menuShowing && hideMenus)
-		toggleMenu();
+nms.tvmode.start = function(views,interval,nightMode,hideMenus,displayVertical) {
 	nms.tvmode.handlers = [];
 	for(var view in views) {
 		for(var handler in handlers) {
@@ -348,9 +349,21 @@ nms.tvmode.start = function(views,interval,nightMode,hideMenus) {
 		}
 	}
 	if (nms.tvmode.handlers.length > 1) {
+		if(interval > 0)
+			nms.tvmode.interval = interval * 1000;
+		setNightMode(nightMode);
+		if(nms.menuShowing && hideMenus)
+			toggleMenu();
+		if(displayVertical)
+			nms.tvmode.vertical = true;
 		nms.timers.tvmode = new nmsTimer(nms.tvmode.tick, nms.tvmode.interval, "TV-mode ticker", "Handler used to advance tv-mode");
 		nms.timers.tvmode.start();
 		nms.tvmode.tick();
+		nms.tvmode.active = true;
+
+		document.body.classList.add("tvmode");
+		if(nms.tvmode.vertical)
+			document.body.classList.add("vertical");
 	}
 }
 nms.tvmode.tick = function() {
@@ -362,6 +375,9 @@ nms.tvmode.tick = function() {
 }
 nms.tvmode.stop = function() {
 	nms.timers.tvmode.stop();
+	document.body.classList.remove("tvmode");
+	document.body.classList.remove("vertical");
+	nms.tvmode.active = false;
 }
 
 /*
@@ -384,6 +400,8 @@ function setUpdater(fo)
 	}
 	var foo = document.getElementById("updater_name");
 	foo.innerHTML = fo.name + "   ";
+	var foo = document.getElementById("map-mode-title");
+	foo.innerHTML = fo.name;
 	document.location.hash = fo.tag;
 }
 
@@ -496,8 +514,10 @@ function setNightMode(toggle) {
 	var nav = document.getElementsByTagName("nav")[0];
 	if (toggle) {
 		nav.classList.add('navbar-inverse');
+		document.body.classList.add("nightmode");
 	} else {
 		nav.classList.remove('navbar-inverse');
+		document.body.classList.remove("nightmode");
 	}
 	nmsMap.setNightMode(toggle);
 }
@@ -548,12 +568,27 @@ function detectHandler() {
 	}
 	if(document.location.hash == "#tvmode") {
 		var views = getUrlVars()["views"];
-		views = views.split(",");
+		var nightMode = parseInt(getUrlVars()["nightmode"]);
+		var vertical = parseInt(getUrlVars()["vertical"]);
 		var interval = parseInt(getUrlVars()["interval"]);
-		nms.tvmode.start(views,interval,true,false);
+
+		views = views.split(",");
+		if(nightMode == "0") {
+			nightMode = false;
+		} else {
+			nightMode = true;
+		}
+		if(vertical == 1) {
+			vertical = true;
+		} else {
+			vertical = false;
+		}
+
+		nms.tvmode.start(views,interval,nightMode,true,vertical);
 		return;
+	} else {
+		setUpdater(handler_ping);
 	}
-	setUpdater(handler_ping);
 }
 
 function getUrlVars() {