interactive hid leds

7 files changed, 124 insertions, 14 deletions

diff --git a/kvmd/web/index.html b/kvmd/web/index.html
index 2aa65530..4233c01b 100644
--- a/kvmd/web/index.html
+++ b/kvmd/web/index.html
@@ -39,6 +39,7 @@
 		<li class="ctl-right-actions">
 			<div class="ctl-dropdown">
 				<a class="ctl-item" href="#">
+					<img data-dont-hide-menu id="link-led" class="led-off" src="svg/link-led.svg" />
 					<img data-dont-hide-menu id="stream-led" class="led-off" src="svg/stream-led.svg" />
 					<img data-dont-hide-menu id="hid-keyboard-led" class="led-off" src="svg/hid-keyboard-led.svg" />
 					<img data-dont-hide-menu id="hid-mouse-led" class="led-off" src="svg/hid-mouse-led.svg" />
diff --git a/kvmd/web/js/hid.js b/kvmd/web/js/hid.js
index 5b0b1a0d..a8a5d653 100644
--- a/kvmd/web/js/hid.js
+++ b/kvmd/web/js/hid.js
@@ -8,14 +8,19 @@ var hid = new function() {
 	this.init = function() {
 		keyboard.init();
 		mouse.init();
-	}
+	};
+
+	this.updateLeds = function() {
+		keyboard.updateLeds();
+		mouse.updateLeds();
+	};
 
 	this.releaseAll = function() {
 		keyboard.releaseAll();
 	};
 
 	this.emitShortcut = function(...codes) {
-		console.log(codes);
+		tools.debug("Emitted keys:", codes);
 		var delay = 0;
 		[[codes, true], [codes.slice().reverse(), false]].forEach(function(op) {
 			var [op_codes, state] = op;
diff --git a/kvmd/web/js/keyboard.js b/kvmd/web/js/keyboard.js
index c6690fdd..9d3f65e6 100644
--- a/kvmd/web/js/keyboard.js
+++ b/kvmd/web/js/keyboard.js
@@ -29,7 +29,12 @@ var keyboard = new function() {
 	this.setSocket = function(ws) {
 		keyboard.releaseAll();
 		__ws = ws;
-		$("hid-keyboard-led").className = (ws ? "led-on" : "led-off");
+		keyboard.updateLeds();
+	};
+
+	this.updateLeds = function() {
+		var focused = (__ws && (document.activeElement === $("stream-window") || document.activeElement === $("keyboard-window")));
+		$("hid-keyboard-led").className = (focused ? "led-on" : "led-off");
 	};
 
 	this.releaseAll = function(ws) {
diff --git a/kvmd/web/js/mouse.js b/kvmd/web/js/mouse.js
index 0f2379fe..3195582c 100644
--- a/kvmd/web/js/mouse.js
+++ b/kvmd/web/js/mouse.js
@@ -14,10 +14,14 @@ var mouse = new function() {
 	};
 
 	this.setSocket = function(ws) {
-		$("hid-mouse-led").className = (ws ? "led-on" : "led-off");
 		__ws = ws;
 	};
 
+	this.updateLeds = function() {
+		var focused = (__ws && document.activeElement === $("stream-window"));
+		$("hid-mouse-led").className = (focused ? "led-on" : "led-off");
+	};
+
 	var __buttonHandler = function(event, state) {
 		// https://www.w3schools.com/jsref/event_button.asp
 		switch (event.button) {
diff --git a/kvmd/web/js/session.js b/kvmd/web/js/session.js
index 756b5437..02847120 100644
--- a/kvmd/web/js/session.js
+++ b/kvmd/web/js/session.js
@@ -28,6 +28,7 @@ var session = new function() {
 	};
 
 	var __wsOpenHandler = function(event) {
+		$("link-led").className = "led-on";
 		tools.debug("WebSocket opened:", event);
 		atx.loadInitialState();
 		msd.loadInitialState();
@@ -62,6 +63,7 @@ var session = new function() {
 	};
 
 	var __wsCloseHandler = function(event) {
+		$("link-led").className = "led-off";
 		tools.debug("WebSocket closed:", event);
 		if (__ping_timer) {
 			clearInterval(__ping_timer);
diff --git a/kvmd/web/js/ui.js b/kvmd/web/js/ui.js
index a162adf5..03cc9ac2 100644
--- a/kvmd/web/js/ui.js
+++ b/kvmd/web/js/ui.js
@@ -49,7 +49,7 @@ var ui = new function() {
 			);
 		}
 
-		window.onclick = __windowClickHandler;
+		window.onclick = __globalClickHandler;
 		window.onpagehide = hid.releaseAll;
 		window.onblur = hid.releaseAll;
 
@@ -83,19 +83,25 @@ var ui = new function() {
 	};
 
 	var __toggleMenu = function(el_a) {
+		var all_hidden = true;
 		__ctl_items.forEach(function(el_item) {
 			var el_menu = el_item.parentElement.querySelector(".ctl-dropdown-content");
 			if (el_item === el_a && el_menu.style.display === "none") {
 				el_menu.style.display = "block";
 				el_item.setAttribute("style", "background-color: var(--bg-color-selected)");
+				all_hidden &= false;
 			} else {
 				el_menu.style.display = "none";
 				el_item.setAttribute("style", "background-color: default");
 			}
 		});
+		if (all_hidden) {
+			__raiseLastWindow();
+		}
 	};
 
-	var __windowClickHandler = function(event) {
+	var __globalClickHandler = function(event) {
+		hid.updateLeds();
 		if (!event.target.matches(".ctl-item")) {
 			for (el_item = event.target; el_item && el_item !== document; el_item = el_item.parentNode) {
 				if (el_item.hasAttribute("data-force-hide-menu")) {
@@ -106,7 +112,6 @@ var ui = new function() {
 				}
 			}
 			__toggleMenu(null);
-			__raiseLastWindow();
 		}
 	};
 
@@ -154,16 +159,17 @@ var ui = new function() {
 				max_z_index = z_index;
 			}
 		});
-		if (last_el_window) {
-			__raiseWindow(last_el_window);
-		}
+		__raiseWindow(last_el_window);
 	};
 
 	var __raiseWindow = function(el_window) {
-		var z_index = __top_z_index + 1;
-		el_window.style.zIndex = z_index;
 		el_window.focus();
-		__top_z_index = z_index;
-		console.log("raise", el_window, el_window.style.zIndex);
+		hid.updateLeds();
+		if (parseInt(el_window.style.zIndex) !== __top_z_index) {
+			var z_index = __top_z_index + 1;
+			el_window.style.zIndex = z_index;
+			__top_z_index = z_index;
+			tools.debug("Raised window:", el_window);
+		}
 	};
 };
diff --git a/kvmd/web/svg/link-led.svg b/kvmd/web/svg/link-led.svg
new file mode 100644
index 00000000..8cc10e13
--- /dev/null
+++ b/kvmd/web/svg/link-led.svg
@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="iso-8859-1"?>

+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">

+<g>

+	<g>

+		<path d="M168,184.036c-6.632,0-12,5.376-12,12v23.752c0,6.628,5.368,12,12,12c6.624,0,12-5.372,12-12v-23.752

+			C180,189.412,174.624,184.036,168,184.036z"/>

+	</g>

+</g>

+<g>

+	<g>

+		<path d="M256,184.036c-6.632,0-12,5.376-12,12v23.752c0,6.628,5.368,12,12,12c6.624,0,12-5.372,12-12v-23.752

+			C268,189.412,262.624,184.036,256,184.036z"/>

+	</g>

+</g>

+<g>

+	<g>

+		<path d="M212,184.036c-6.632,0-12,5.376-12,12v23.752c0,6.628,5.368,12,12,12c6.624,0,12-5.372,12-12v-23.752

+			C224,189.412,218.624,184.036,212,184.036z"/>

+	</g>

+</g>

+<g>

+	<g>

+		<path d="M460,0H52C23.28,0,0,23.28,0,52v408c0,28.72,23.28,52,52,52h408c28.72,0,52-23.28,52-52V52C512,23.28,488.72,0,460,0z

+			 M444,284h-88.024c-2.212,0-3.976,1.64-3.976,3.848V348H160v-60.152c0-2.208-1.616-3.848-3.828-3.848H68V68h44v92.184

+			c0,6.624,5.368,12,12,12c6.624,0,12-5.376,12-12V68h20v92.184c0,6.624,5.368,12,12,12c6.624,0,12-5.376,12-12V68h20v92.184

+			c0,6.624,5.368,12,12,12c6.624,0,12-5.376,12-12V68h20v92.184c0,6.624,5.368,12,12,12c6.624,0,12-5.376,12-12V68h20v92.184

+			c0,6.624,5.368,12,12,12c6.624,0,12-5.376,12-12V68h20v92.184c0,6.624,5.368,12,12,12c6.624,0,12-5.376,12-12V68h20v92.184

+			c0,6.624,5.368,12,12,12c6.624,0,12-5.376,12-12V68h44V284z"/>

+	</g>

+</g>

+<g>

+	<g>

+		<path d="M124,184.036c-6.632,0-12,5.376-12,12v23.752c0,6.628,5.368,12,12,12c6.624,0,12-5.372,12-12v-23.752

+			C136,189.412,130.624,184.036,124,184.036z"/>

+	</g>

+</g>

+<g>

+	<g>

+		<path d="M388,184.036c-6.632,0-12,5.376-12,12v23.752c0,6.628,5.368,12,12,12c6.624,0,12-5.372,12-12v-23.752

+			C400,189.412,394.624,184.036,388,184.036z"/>

+	</g>

+</g>

+<g>

+	<g>

+		<path d="M344,184.036c-6.632,0-12,5.376-12,12v23.752c0,6.628,5.368,12,12,12c6.624,0,12-5.372,12-12v-23.752

+			C356,189.412,350.624,184.036,344,184.036z"/>

+	</g>

+</g>

+<g>

+	<g>

+		<path d="M300,184.036c-6.632,0-12,5.376-12,12v23.752c0,6.628,5.368,12,12,12c6.624,0,12-5.372,12-12v-23.752

+			C312,189.412,306.624,184.036,300,184.036z"/>

+	</g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+</svg>