From 6cd4a0a988da566243381d7387114f4cfe9eba5f Mon Sep 17 00:00:00 2001 From: Devaev Maxim Date: Thu, 20 Feb 2020 11:11:39 +0300 Subject: otg keyboard leds --- web/share/css/main.css | 4 ++ web/share/css/menu.css | 8 +++- web/share/js/kvm/keyboard.js | 37 +++++++++++---- web/share/js/kvm/mouse.js | 10 ++-- web/share/svg/led-square.svg | 111 +++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 154 insertions(+), 16 deletions(-) create mode 100644 web/share/svg/led-square.svg (limited to 'web/share') 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 @@ + + + +image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file -- cgit v1.2.3