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

ipad mouse buttons, keyboard refactoring

Browse Source
This commit is contained in:
Devaev Maxim
2019-04-24 22:32:53 +03:00
parent 3ecd337b3a
commit 3d64401b11
9 changed files with 558 additions and 437 deletions
Download Patch File Download Diff File Expand all files Collapse all files

175
web/share/js/keypad.js Normal file
View File

@@ -0,0 +1,175 @@
/*****************************************************************************
# #
# KVMD - The main Pi-KVM daemon. #
# #
# Copyright (C) 2018 Maxim Devaev <mdevaev@gmail.com> #
# #
# This program is free software: you can redistribute it and/or modify #
# it under the terms of the GNU General Public License as published by #
# the Free Software Foundation, either version 3 of the License, or #
# (at your option) any later version. #
# #
# This program is distributed in the hope that it will be useful, #
# but WITHOUT ANY WARRANTY; without even the implied warranty of #
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the #
# GNU General Public License for more details. #
# #
# You should have received a copy of the GNU General Public License #
# along with this program. If not, see <https://www.gnu.org/licenses/>. #
# #
*****************************************************************************/
function Keypad(keys_parent, key_callback) {
var self = this;
/************************************************************************/
var __merged = {};
var __keys = {};
var __modifiers = {};
var __init__ = function() {
var code;
var el_key;
for (el_key of $$$(keys_parent + " div.key")) {
code = el_key.getAttribute("data-code");
tools.setDefault(__keys, code, []);
__keys[code].push(el_key);
tools.setDefault(__merged, code, []);
__merged[code].push(el_key);
(function(el_key) {
tools.setOnDown(el_key, () => __clickHandler(el_key, true));
tools.setOnUp(el_key, () => __clickHandler(el_key, false));
el_key.onmouseout = function() {
if (__isPressed(el_key)) {
__clickHandler(el_key, false);
}
};
})(el_key);
}
for (el_key of $$$(keys_parent + " div.modifier")) {
code = el_key.getAttribute("data-code");
tools.setDefault(__modifiers, code, []);
__modifiers[code].push(el_key);
tools.setDefault(__merged, code, []);
__merged[code].push(el_key);
(function(el_key) {
tools.setOnDown(el_key, () => __toggleModifierHandler(el_key));
})(el_key);
}
};
/************************************************************************/
self.releaseAll = function(release_hook=false) {
for (var dict of [__keys, __modifiers]) {
for (var code in dict) {
if (__isActive(dict[code][0])) {
self.emit(code, false, release_hook);
}
}
}
};
self.emit = function(code, state, release_hook=false) {
if (code in __merged) {
__commonHandler(__merged[code][0], state, false);
if (release_hook) {
for (code in __keys) {
if (__isActive(__keys[code][0])) {
self.emit(code, false);
}
}
}
__unholdModifiers();
}
};
var __clickHandler = function(el_key, state) {
__commonHandler(el_key, state, false);
__unholdModifiers();
};
var __toggleModifierHandler = function(el_key) {
__commonHandler(el_key, !__isActive(el_key), true);
};
var __commonHandler = function(el_key, state, hold) {
if (state && !__isActive(el_key)) {
__deactivate(el_key);
__activate(el_key, (hold ? "holded" : "pressed"));
__process(el_key, true);
} else {
__deactivate(el_key);
__process(el_key, false);
}
};
var __unholdModifiers = function() {
for (var code in __modifiers) {
var el_key = __modifiers[code][0];
if (__isHolded(el_key)) {
__deactivate(el_key);
__process(el_key, false);
}
}
};
var __isPressed = function(el_key) {
var is_pressed = false;
for (el_key of __resolveKeys(el_key)) {
is_pressed = (is_pressed || el_key.classList.contains("pressed"));
}
return is_pressed;
};
var __isHolded = function(el_key) {
var is_holded = false;
for (el_key of __resolveKeys(el_key)) {
is_holded = (is_holded || el_key.classList.contains("holded"));
}
return is_holded;
};
var __isActive = function(el_key) {
var is_active = false;
for (el_key of __resolveKeys(el_key)) {
is_active = (is_active || el_key.classList.contains("pressed") || el_key.classList.contains("holded"));
}
return is_active;
};
var __activate = function(el_key, cls) {
for (el_key of __resolveKeys(el_key)) {
el_key.classList.add(cls);
}
};
var __deactivate = function(el_key) {
for (el_key of __resolveKeys(el_key)) {
el_key.classList.remove("pressed");
el_key.classList.remove("holded");
}
};
var __resolveKeys = function(el_key) {
var code = el_key.getAttribute("data-code");
return __merged[code];
};
var __process = function(el_key, state) {
var code = el_key.getAttribute("data-code");
key_callback(code, state);
};
__init__();
}

3
web/share/js/kvm/hid.js
View File

@@ -91,6 +91,7 @@ function Hid() {
var __releaseAll = function() {
__keyboard.releaseAll();
__mouse.releaseAll();
};
var __emitShortcut = function(codes) {
@@ -107,7 +108,7 @@ function Hid() {
var index = 0;
var iterate = () => setTimeout(function() {
__keyboard.fireEvent(raw_events[index].code, raw_events[index].state);
__keyboard.emit(raw_events[index].code, raw_events[index].state);
++index;
if (index < raw_events.length) {
iterate();

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

@@ -28,10 +28,12 @@ function Keyboard() {
var __ws = null;
var __online = true;
var __keys = [].slice.call($$$("div#keyboard-desktop div.keyboard-block div.keyboard-row div.key"));
var __modifiers = [].slice.call($$$("div#keyboard-desktop div.keyboard-block div.keyboard-row div.modifier"));
var __keypad = null;
var __use_release_hook = false;
var __init__ = function() {
__keypad = new Keypad("div#keyboard-window", __sendKey);
$("hid-keyboard-led").title = "Keyboard free";
$("keyboard-window").onkeydown = (event) => __keyboardHandler(event, true);
@@ -47,22 +49,11 @@ function Keyboard() {
window.addEventListener("focusin", __updateLeds);
window.addEventListener("focusout", __updateLeds);
tools.forEach($$("key"), function(el_key) {
tools.setOnDown(el_key, () => __clickHandler(el_key, true));
tools.setOnUp(el_key, () => __clickHandler(el_key, false));
el_key.onmouseout = function() {
if (__isPressed(el_key)) {
__clickHandler(el_key, false);
}
};
});
tools.forEach($$("modifier"), function(el_key) {
tools.setOnDown(el_key, () => __toggleModifierHandler(el_key));
});
if (tools.browser.is_mac) {
// https://bugs.chromium.org/p/chromium/issues/detail?id=28089
// https://bugzilla.mozilla.org/show_bug.cgi?id=1299553
tools.info("Keyboard: enabled Mac-CMD-Hook");
__use_release_hook = true;
}
};
@@ -82,14 +73,10 @@ function Keyboard() {
};
self.releaseAll = function() {
__keys.concat(__modifiers).forEach(function(el_key) {
if (__isActive(el_key)) {
self.fireEvent(el_key.getAttribute("data-key"), false);
}
});
__keypad.releaseAll(__use_release_hook);
};
self.fireEvent = function(code, state) {
self.emit = function(code, state) {
__keyboardHandler({code: code}, state);
};
@@ -124,97 +111,14 @@ function Keyboard() {
if (event.preventDefault) {
event.preventDefault();
}
var el_key = document.querySelector(`[data-key='${event.code}']`);
if (el_key && !event.repeat) {
__commonHandler(el_key, state, "pressed");
if (tools.browser.is_mac) {
// https://bugs.chromium.org/p/chromium/issues/detail?id=28089
// https://bugzilla.mozilla.org/show_bug.cgi?id=1299553
if ((event.code === "MetaLeft" || event.code === "MetaRight") && !state) {
__keys.forEach(function(el_key) {
if (__isActive(el_key)) {
self.fireEvent(el_key.getAttribute("data-key"), false);
}
});
}
}
__unholdModifiers();
if (!event.repeat) {
// https://bugs.chromium.org/p/chromium/issues/detail?id=28089
// https://bugzilla.mozilla.org/show_bug.cgi?id=1299553
__keypad.emit(event.code, state, __use_release_hook);
}
};
var __clickHandler = function(el_key, state) {
__commonHandler(el_key, state, "pressed");
__unholdModifiers();
};
var __toggleModifierHandler = function(el_key) {
__commonHandler(el_key, !__isActive(el_key), "holded");
};
var __unholdModifiers = function() {
__modifiers.forEach(function(el_key) {
if (__isHolded(el_key)) {
__deactivate(el_key);
__sendKey(el_key, false);
}
});
};
var __commonHandler = function(el_key, state, cls) {
if (state && !__isActive(el_key)) {
__deactivate(el_key);
__activate(el_key, cls);
__sendKey(el_key, true);
} else {
__deactivate(el_key);
__sendKey(el_key, false);
}
};
var __isPressed = function(el_key) {
var is_pressed = false;
tools.forEach(__resolveKeys(el_key), function(el_key) {
is_pressed = (is_pressed || el_key.classList.contains("pressed"));
});
return is_pressed;
};
var __isHolded = function(el_key) {
var is_holded = false;
tools.forEach(__resolveKeys(el_key), function(el_key) {
is_holded = (is_holded || el_key.classList.contains("holded"));
});
return is_holded;
};
var __isActive = function(el_key) {
var is_active = false;
tools.forEach(__resolveKeys(el_key), function(el_key) {
is_active = (is_active || el_key.classList.contains("pressed") || el_key.classList.contains("holded"));
});
return is_active;
};
var __activate = function(el_key, cls) {
tools.forEach(__resolveKeys(el_key), function(el_key) {
el_key.classList.add(cls);
});
};
var __deactivate = function(el_key) {
tools.forEach(__resolveKeys(el_key), function(el_key) {
el_key.classList.remove("pressed");
el_key.classList.remove("holded");
});
};
var __resolveKeys = function(el_key) {
var code = el_key.getAttribute("data-key");
return $$$(`[data-key='${code}']`);
};
var __sendKey = function(el_key, state) {
var code = el_key.getAttribute("data-key");
var __sendKey = function(code, state) {
tools.debug("Keyboard: key", (state ? "pressed:" : "released:"), code);
if (__ws) {
__ws.send(JSON.stringify({

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

@@ -28,6 +28,8 @@ function Mouse() {
var __ws = null;
var __online = true;
var __keypad = null;
var __current_pos = {x: 0, y:0};
var __sent_pos = {x: 0, y:0};
var __wheel_delta = {x: 0, y: 0};
@@ -35,22 +37,18 @@ function Mouse() {
var __stream_hovered = false;
var __init__ = function() {
__keypad = new Keypad("div#stream-mouse-buttons", __sendButton);
$("hid-mouse-led").title = "Mouse free";
$("stream-box").onmouseenter = __hoverStream;
$("stream-box").onmouseleave = __leaveStream;
$("stream-box").onmousedown = (event) => __buttonHandler(event, true);
$("stream-box").onmouseup = (event) => __buttonHandler(event, false);
$("stream-box").onmousedown = (event) => __streamButtonHandler(event, true);
$("stream-box").onmouseup = (event) => __streamButtonHandler(event, false);
$("stream-box").oncontextmenu = (event) => event.preventDefault();
$("stream-box").onmousemove = __moveHandler;
$("stream-box").onwheel = __wheelHandler;
$("stream-box").ontouchstart = (event) => __touchMoveHandler(event);
tools.forEach($$$("[data-mouse-button]"), function(el_button) {
var button = el_button.getAttribute("data-mouse-button");
tools.setOnDown(el_button, () => __sendButton(button, true));
tools.setOnUp(el_button, () => __sendButton(button, false));
});
$("stream-box").onmousemove = __streamMoveHandler;
$("stream-box").onwheel = __streamWheelHandler;
$("stream-box").ontouchstart = (event) => __streamTouchMoveHandler(event);
setInterval(__sendMove, 100);
};
@@ -72,6 +70,10 @@ function Mouse() {
__updateLeds();
};
self.releaseAll = function() {
__keypad.releaseAll();
};
var __hoverStream = function() {
__stream_hovered = true;
__updateLeds();
@@ -106,16 +108,16 @@ function Mouse() {
$("hid-mouse-led").title = title;
};
var __buttonHandler = function(event, state) {
var __streamButtonHandler = function(event, state) {
// https://www.w3schools.com/jsref/event_button.asp
event.preventDefault();
switch (event.button) {
case 0: __sendButton("left", state); break;
case 2: __sendButton("right", state); break;
case 0: __keypad.emit("left", state); break;
case 2: __keypad.emit("right", state); break;
}
};
var __touchMoveHandler = function(event) {
var __streamTouchMoveHandler = function(event) {
event.preventDefault();
if (event.touches[0].target && event.touches[0].target.getBoundingClientRect) {
var rect = event.touches[0].target.getBoundingClientRect();
@@ -127,7 +129,7 @@ function Mouse() {
}
};
var __moveHandler = function(event) {
var __streamMoveHandler = function(event) {
var rect = event.target.getBoundingClientRect();
__current_pos = {
x: Math.round(event.clientX - rect.left),
@@ -172,7 +174,7 @@ function Mouse() {
return Math.round((x - a) / (b - a) * (d - c) + c);
};
var __wheelHandler = function(event) {
var __streamWheelHandler = function(event) {
// https://learn.javascript.ru/mousewheel
if (event.preventDefault) {
event.preventDefault();

6
web/share/js/tools.js
View File

@@ -25,6 +25,12 @@ var tools = new function() {
this.forEach = (...args) => Array.prototype.forEach.call(...args);
this.setDefault = function(dict, key, value) {
if (!(key in dict)) {
dict[key] = value;
}
};
this.makeRequest = function(method, url, callback, body=null, content_type=null) {
var http = new XMLHttpRequest();
http.open(method, url, true);