GithubFollow/One-KVM
1
0
Fork 0
mirror of https://github.com/mofeng-git/One-KVM.git synced 2026-01-29 09:01:54 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

otg keyboard leds

Browse Source
This commit is contained in:
Devaev Maxim
2020-02-20 11:11:39 +03:00
parent d732b4f518
commit 6cd4a0a988
12 changed files with 302 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
web/kvm/index.html
View File

@@ -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>

4
web/share/css/main.css
View File

@@ -80,6 +80,10 @@ img.svg-gray {
filter: invert(0.7);
vertical-align: middle;
}
img.inline {
vertical-align: middle;
height: 0.8em;
}
button,
select {

8
web/share/css/menu.css
View File

@@ -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;
}

37
web/share/js/kvm/keyboard.js
View File

@@ -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")

10
web/share/js/kvm/mouse.js
View File

@@ -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";

111
web/share/svg/led-square.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB