otg keyboard leds

6 files changed, 180 insertions, 26 deletions

diff --git a/web/kvm/index.html b/web/kvm/index.html
index 5411f43f..8a4f759b 100644
--- a/web/kvm/index.html
+++ b/web/kvm/index.html
@@ -158,7 +158,7 @@
 					<div class="menu-item-content-text">
 						<table>
 							<tr>
-								<td><img src="../share/svg/warning.svg" /></td>
+								<td><img class="sign" src="../share/svg/warning.svg" /></td>
 								<td><b>Mass Storage Device is offline</b></td>
 							</tr>
 						</table>
@@ -169,7 +169,7 @@
 					<div class="menu-item-content-text">
 						<table>
 							<tr>
-								<td><img src="../share/svg/warning.svg" /></td>
+								<td><img class="sign" src="../share/svg/warning.svg" /></td>
 								<td><b>Current image is broken!</b><br><sub>Perhaps uploading was interrupted</sub></td>
 							</tr>
 						</table>
@@ -180,7 +180,7 @@
 					<div class="menu-item-content-text">
 						<table>
 							<tr>
-								<td><img src="../share/svg/warning.svg" /></td>
+								<td><img class="sign" src="../share/svg/warning.svg" /></td>
 								<td><b>Current image is too big for CD-ROM!</b><br><sub>The device filesystem will be truncated to 2.2GiB</sub></td>
 							</tr>
 						</table>
@@ -191,7 +191,7 @@
 					<div class="menu-item-content-text">
 						<table>
 							<tr>
-								<td><img src="../share/svg/info.svg" /></td>
+								<td><img class="sign" src="../share/svg/info.svg" /></td>
 								<td><b>Current image is out of storage</b><br><sub>This image was connected manually using <b>kvmd-otgmsd</b></sub></td>
 							</tr>
 						</table>
@@ -202,7 +202,7 @@
 					<div class="menu-item-content-text">
 						<table>
 							<tr>
-								<td><img src="../share/svg/info.svg" /></td>
+								<td><img class="sign" src="../share/svg/info.svg" /></td>
 								<td><b>Another user uploads an image</b></td>
 							</tr>
 						</table>
@@ -311,7 +311,11 @@
 					<button disabled data-force-hide-menu id="hid-pak-button">&bull; &#x21b3; Paste-as-Keys <sup><i>ascii-only</i></sup></button>
 					<hr>
 					<div class="buttons-row">
-						<button data-force-hide-menu data-shortcut="CapsLock" class="row50">&bull; CapsLock</button>
+						<button data-force-hide-menu data-shortcut="CapsLock" class="row50">
+							&bull;
+							<img class="inline hid-keyboard-leds hid-keyboard-caps-led led-gray feature-disabled" src="../share/svg/led-square.svg" />
+							CapsLock
+						</button>
 						<button data-force-hide-menu data-shortcut="MetaLeft" class="row50">&bull; Left Win</button>
 					</div>
 					<hr>
@@ -427,7 +431,10 @@
 					<div data-code="Backslash" class="key"><p>|<br>\</p></div>
 				</div>
 				<div class="keypad-row">
-					<div data-code="CapsLock" class="key wide-3 left small"><p>Caps Lock</p></div>
+					<div data-code="CapsLock" class="key wide-3 left small">
+						<img class="inline hid-keyboard-leds hid-keyboard-caps-led led-gray feature-disabled" src="../share/svg/led-square.svg" />
+						<p>Caps Lock</p>
+					</div>
 					<div data-code="KeyA" class="key single"><p>A</p></div>
 					<div data-code="KeyS" class="key single"><p>S</p></div>
 					<div data-code="KeyD" class="key single"><p>D</p></div>
@@ -468,7 +475,10 @@
 			<div class="keypad-block">
 				<div class="keypad-row">
 					<div data-code="PrintScreen" class="modifier small"><p><b>&bull;</b><br>Pt/Sq</p></div>
-					<div data-code="ScrollLock" class="key small"><p>ScrLk</p></div>
+					<div data-code="ScrollLock" class="key small">
+						<img class="inline hid-keyboard-leds hid-keyboard-scroll-led led-gray feature-disabled" src="../share/svg/led-square.svg" />
+						<p>ScrLk</p>
+					</div>
 					<div data-code="Pause" class="key small"><p>P/Brk</p></div>
 				</div>
 				<hr>
@@ -515,7 +525,10 @@
 					<div data-code="F12" class="key wide-0 margin-0 small"><p>F12</p></div>
 					<div class="empty-key" style="width:5px"></div>
 					<div data-code="PrintScreen" class="modifier margin-0 small"><p><b>&bull;</b><br>Pt/Sq</p></div>
-					<div data-code="ScrollLock" class="key margin-0 small"><p>ScrLk</p></div>
+					<div data-code="ScrollLock" class="key margin-0 small">
+						<img class="inline hid-keyboard-leds hid-keyboard-scroll-led led-gray feature-disabled" src="../share/svg/led-square.svg" />
+						<p>ScrLk</p>
+					</div>
 					<div data-code="Pause" class="key margin-0 small"><p>P/Brk</p></div>
 					<div data-code="Insert" class="key margin-0 small"><p>Ins</p></div>
 					<div data-code="Home" class="key margin-0 small"><p>Home</p></div>
@@ -556,7 +569,10 @@
 					<div data-code="Backslash" class="key wide-2 left" style="width:78px"><p>|<br>\</p></div>
 				</div>
 				<div class="keypad-row">
-					<div data-code="CapsLock" class="key wide-3 left small"><p>Caps Lock</p></div>
+					<div data-code="CapsLock" class="key wide-3 left small">
+						<img class="inline hid-keyboard-leds hid-keyboard-caps-led led-gray feature-disabled" src="../share/svg/led-square.svg" />
+						<p>Caps Lock</p>
+					</div>
 					<div data-code="KeyA" class="key single"><p>A</p></div>
 					<div data-code="KeyS" class="key single"><p>S</p></div>
 					<div data-code="KeyD" class="key single"><p>D</p></div>
diff --git a/web/share/css/main.css b/web/share/css/main.css
index c97b103d..ab506a1b 100644
--- a/web/share/css/main.css
+++ b/web/share/css/main.css
@@ -80,6 +80,10 @@ img.svg-gray {
 	filter: invert(0.7);
 	vertical-align: middle;
 }
+img.inline {
+	vertical-align: middle;
+	height: 0.8em;
+}
 
 button,
 select {
diff --git a/web/share/css/menu.css b/web/share/css/menu.css
index 5a7b9d22..a4babb73 100644
--- a/web/share/css/menu.css
+++ b/web/share/css/menu.css
@@ -53,7 +53,7 @@ ul#menu li a#menu-logo {
 	text-decoration: none;
 }
 
-ul#menu img {
+ul#menu li a.menu-item img {
 	vertical-align: middle;
 	margin-right: 10px;
 	height: 20px;
@@ -150,3 +150,9 @@ ul#menu li div.menu-item-content hr {
 	border: none;
 	border-top: var(--border-control-thin);
 }
+
+ul#menu li div.menu-item-content img.sign {
+	vertical-align: middle;
+	margin-right: 10px;
+	height: 20px;
+}
diff --git a/web/share/js/kvm/keyboard.js b/web/share/js/kvm/keyboard.js
index a443b2c9..0398baef 100644
--- a/web/share/js/kvm/keyboard.js
+++ b/web/share/js/kvm/keyboard.js
@@ -20,7 +20,7 @@
 *****************************************************************************/
 
 
-import {tools, $} from "../tools.js";
+import {tools, $, $$$} from "../tools.js";
 import {Keypad} from "../keypad.js";
 
 
@@ -42,16 +42,16 @@ export function Keyboard() {
 
 		$("keyboard-window").onkeydown = (event) => __keyboardHandler(event, true);
 		$("keyboard-window").onkeyup = (event) => __keyboardHandler(event, false);
-		$("keyboard-window").onfocus = __updateLeds;
-		$("keyboard-window").onblur = __updateLeds;
+		$("keyboard-window").onfocus = __updateOnlineLeds;
+		$("keyboard-window").onblur = __updateOnlineLeds;
 
 		$("stream-window").onkeydown = (event) => __keyboardHandler(event, true);
 		$("stream-window").onkeyup = (event) => __keyboardHandler(event, false);
-		$("stream-window").onfocus = __updateLeds;
-		$("stream-window").onblur = __updateLeds;
+		$("stream-window").onfocus = __updateOnlineLeds;
+		$("stream-window").onblur = __updateOnlineLeds;
 
-		window.addEventListener("focusin", __updateLeds);
-		window.addEventListener("focusout", __updateLeds);
+		window.addEventListener("focusin", __updateOnlineLeds);
+		window.addEventListener("focusout", __updateOnlineLeds);
 
 		if (tools.browser.is_mac) {
 			// https://bugs.chromium.org/p/chromium/issues/detail?id=28089
@@ -68,12 +68,29 @@ export function Keyboard() {
 			self.releaseAll();
 			__ws = ws;
 		}
-		__updateLeds();
+		__updateOnlineLeds();
 	};
 
 	self.setState = function(state) {
 		__online = state.online;
-		__updateLeds();
+		__updateOnlineLeds();
+
+		for (let el of $$$(".hid-keyboard-leds")) {
+			console.log(el, state.features.leds);
+			el.classList.toggle("feature-disabled", !state.features.leds);
+		}
+
+		for (let led of ["caps", "scroll", "num"]) {
+			for (let el of $$$(`.hid-keyboard-${led}-led`)) {
+				if (state.leds[led]) {
+					el.classList.add("led-green");
+					el.classList.remove("led-gray");
+				} else {
+					el.classList.add("led-gray");
+					el.classList.remove("led-green");
+				}
+			}
+		}
 	};
 
 	self.releaseAll = function() {
@@ -84,7 +101,7 @@ export function Keyboard() {
 		__keyboardHandler({code: code}, state);
 	};
 
-	var __updateLeds = function() {
+	var __updateOnlineLeds = function() {
 		let is_captured = (
 			$("stream-window").classList.contains("window-active")
 			|| $("keyboard-window").classList.contains("window-active")
diff --git a/web/share/js/kvm/mouse.js b/web/share/js/kvm/mouse.js
index 1b8aa716..b4978dfe 100644
--- a/web/share/js/kvm/mouse.js
+++ b/web/share/js/kvm/mouse.js
@@ -65,12 +65,12 @@ export function Mouse() {
 	self.setSocket = function(ws) {
 		__ws = ws;
 		$("stream-box").classList.toggle("stream-box-mouse-enabled", ws);
-		__updateLeds();
+		__updateOnlineLeds();
 	};
 
 	self.setState = function(state) {
 		__online = state.online;
-		__updateLeds();
+		__updateOnlineLeds();
 	};
 
 	self.releaseAll = function() {
@@ -79,15 +79,15 @@ export function Mouse() {
 
 	var __hoverStream = function() {
 		__stream_hovered = true;
-		__updateLeds();
+		__updateOnlineLeds();
 	};
 
 	var __leaveStream = function() {
 		__stream_hovered = false;
-		__updateLeds();
+		__updateOnlineLeds();
 	};
 
-	var __updateLeds = function() {
+	var __updateOnlineLeds = function() {
 		let is_captured = (__stream_hovered || tools.browser.is_ios);
 		let led = "led-gray";
 		let title = "Mouse free";
diff --git a/web/share/svg/led-square.svg b/web/share/svg/led-square.svg
new file mode 100644
index 00000000..f677e004
--- /dev/null
+++ b/web/share/svg/led-square.svg
@@ -0,0 +1,111 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 512 512"
+   style="enable-background:new 0 0 512 512;"
+   xml:space="preserve"
+   sodipodi:docname="led-square.svg"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14"><metadata
+   id="metadata85"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+   id="defs83">
+	
+
+		
+	</defs><sodipodi:namedview
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1"
+   objecttolerance="10"
+   gridtolerance="10"
+   guidetolerance="10"
+   inkscape:pageopacity="0"
+   inkscape:pageshadow="2"
+   inkscape:window-width="1920"
+   inkscape:window-height="1020"
+   id="namedview81"
+   showgrid="false"
+   inkscape:zoom="0.921875"
+   inkscape:cx="223.44119"
+   inkscape:cy="239.43047"
+   inkscape:window-x="0"
+   inkscape:window-y="30"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="Layer_1" />
+
+
+
+<path
+   d="M 460,0 H 52 C 23.28,0 0,23.28 0,52 v 408 c 0,28.72 23.28,52 52,52 h 408 c 28.72,0 52,-23.28 52,-52 V 52 C 512,23.28 488.72,0 460,0 Z"
+   id="path20"
+   inkscape:connector-curvature="0"
+   sodipodi:nodetypes="sssssssss" />
+
+
+
+
+<g
+   id="g50">
+</g>
+<g
+   id="g52">
+</g>
+<g
+   id="g54">
+</g>
+<g
+   id="g56">
+</g>
+<g
+   id="g58">
+</g>
+<g
+   id="g60">
+</g>
+<g
+   id="g62">
+</g>
+<g
+   id="g64">
+</g>
+<g
+   id="g66">
+</g>
+<g
+   id="g68">
+</g>
+<g
+   id="g70">
+</g>
+<g
+   id="g72">
+</g>
+<g
+   id="g74">
+</g>
+<g
+   id="g76">
+</g>
+<g
+   id="g78">
+</g>
+<rect
+   style="opacity:1;fill:none;fill-opacity:1;paint-order:normal"
+   id="rect4830"
+   width="478.37289"
+   height="351.45764"
+   x="26.033897"
+   y="58.576271" /></svg>
\ No newline at end of file