mirror of
https://github.com/mofeng-git/One-KVM.git
synced 2025-12-12 01:00:29 +08:00
interactive hid leds
This commit is contained in:
Devaev Maxim
parent
c3939214bf
commit
01e5a8caee
@ -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" />
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
87
kvmd/web/svg/link-led.svg
Normal file
87
kvmd/web/svg/link-led.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
Loading…
x
Reference in New Issue
Block a user