From 01e5a8caeeeba2772acf5f888278e891aea09608 Mon Sep 17 00:00:00 2001 From: Devaev Maxim Date: Sat, 28 Jul 2018 13:23:27 +0300 Subject: interactive hid leds --- kvmd/web/index.html | 1 + kvmd/web/js/hid.js | 9 +++-- kvmd/web/js/keyboard.js | 7 +++- kvmd/web/js/mouse.js | 6 +++- kvmd/web/js/session.js | 2 ++ kvmd/web/js/ui.js | 26 ++++++++------ kvmd/web/svg/link-led.svg | 87 +++++++++++++++++++++++++++++++++++++++++++++++ 7 files changed, 124 insertions(+), 14 deletions(-) create mode 100644 kvmd/web/svg/link-led.svg 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 @@
  • + 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 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -- cgit v1.2.3