NMS: TV mode?

3 files changed, 158 insertions, 4 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-map.js b/web/nms.gathering.org/js/nms-map.js
index ada6886..c64a387 100644
--- a/web/nms.gathering.org/js/nms-map.js
+++ b/web/nms.gathering.org/js/nms-map.js
@@ -172,10 +172,16 @@ nmsMap._resizeEvent = function() {
  *
  * 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;
+	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;
diff --git a/web/nms.gathering.org/js/nms.js b/web/nms.gathering.org/js/nms.js
index ea440fc..0c4790c 100644
--- a/web/nms.gathering.org/js/nms.js
+++ b/web/nms.gathering.org/js/nms.js
@@ -16,7 +16,8 @@ var nms = {
 	 * FIXME: Should just stop using these.
 	 */
 	timers: {
-		playback:false
+		playback:false,
+		tvmode: false
     },
 	
 	menuShowing:true,
@@ -59,7 +60,16 @@ var nms = {
 		playing: false,
 		replayTime: 0,
 		replayIncrement: 60 * 60
-	 }
+	},
+	tvmode: {
+		handlers: [],
+		currentIndex: 0,
+		interval: 20000,
+		hideMenu: false,
+		active: false,
+		nightMode: false,
+		vertical: false
+	}
 };
 
 /*
@@ -313,13 +323,64 @@ 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;
 }
 
 /*
+ * Start TV-mode
+ *
+ * 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,displayVertical) {
+	nms.tvmode.handlers = [];
+	for(var view in views) {
+		for(var handler in handlers) {
+			if(views[view] == handlers[handler].tag) {
+				nms.tvmode.handlers.push(handlers[handler]);
+			}
+		}
+	}
+	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() {
+	if(nms.tvmode.currentIndex > nms.tvmode.handlers.length - 1) {
+		nms.tvmode.currentIndex = 0;
+	}
+	setUpdater(nms.tvmode.handlers[nms.tvmode.currentIndex]);
+	nms.tvmode.currentIndex++;
+}
+nms.tvmode.stop = function() {
+	nms.timers.tvmode.stop();
+	document.body.classList.remove("tvmode");
+	document.body.classList.remove("vertical");
+	nms.tvmode.active = false;
+}
+
+/*
  * Change map handler (e.g., change from uplink map to ping map)
  */
 function setUpdater(fo)
@@ -339,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;
 }
 
@@ -451,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);
 }
@@ -501,7 +566,37 @@ function detectHandler() {
 			return;
 		}
 	}
-	setUpdater(handler_ping);
+	if(document.location.hash == "#tvmode") {
+		var views = getUrlVars()["views"];
+		var nightMode = parseInt(getUrlVars()["nightmode"]);
+		var vertical = parseInt(getUrlVars()["vertical"]);
+		var interval = parseInt(getUrlVars()["interval"]);
+
+		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);
+	}
+}
+
+function getUrlVars() {
+	var vars = {};
+	var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
+		vars[key] = value;
+	});
+	return vars;
 }
 
 function setMenu()