GithubFollow/One-KVM
1
0
Fork 0
mirror of https://github.com/mofeng-git/One-KVM.git synced 2025-12-12 09:10:30 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

user macro

Browse Source
This commit is contained in:
Devaev Maxim 2020-06-20 11:29:06 +03:00
parent 490e5b352e
commit cf2f763d1b
8 changed files with 341 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
web/kvm/index.html
View File

@ -300,6 +300,43 @@
</div>
</li>
<li class="menu-right-items">
<a class="menu-item" href="#">
<img data-dont-hide-menu id="hid-recorder-led" class="led-gray" src="../share/svg/led-gear.svg" />
Macro &#8628;
</a>
<div data-dont-hide-menu class="menu-item-content">
<div class="menu-item-content-text">
<b>Record and play keyboard &amp; mouse actions</b><br>
<sub>For security reasons, the record will not saved on Pi-KVM</sub>
</div>
<div class="menu-item-content-buttons buttons-row">
<button disabled data-force-hide-menu id="hid-recorder-record" class="row25">&bull; Rec</button>
<button disabled id="hid-recorder-stop" class="row25">Stop</button>
<button disabled id="hid-recorder-play" class="row25">Play</button>
<button disabled id="hid-recorder-clear" class="row25">Clear</button>
</div>
<hr>
<table class="menu-item-content-kv">
<tr>
<td>Script time:</td>
<td colspan="2" id="hid-recorder-time" class="value">00:00:00.0</td>
</tr>
<tr>
<td>Scripted events:</td>
<td id="hid-recorder-events-count" class="value">0</td>
<td><sup><i>include delays</i></sup></td>
</tr>
</table>
<hr>
<input type="file" id="hid-recorder-new-script-file" />
<div class="menu-item-content-buttons buttons-row">
<button disabled id="hid-recorder-upload" class="row50">Upload script</button>
<button disabled id="hid-recorder-download" class="row50">Download script</button>
</div>
</div>
</li>
<li class="menu-right-items">
<a class="menu-item" href="#">
Shortcuts &#8628;

4
web/share/css/kvm/hid.css
View File

@ -41,3 +41,7 @@ textarea#hid-pak-text::-webkit-input-placeholder {
line-height: 40px;
text-align: center;
}
input#hid-recorder-new-script-file {
display: none;
}

17
web/share/css/led.css
View File

@ -63,18 +63,11 @@ img.led-yellow {
filter: var(--led-filter-yellow);
}
img.led-green-rotating-medium {
-webkit-filter: var(--led-filter-green);
filter: var(--led-filter-green);
-webkit-animation: var(--led-spin-medium);
animation: var(--led-spin-medium);
}
img.led-yellow-rotating-slow {
-webkit-filter: var(--led-filter-yellow);
filter: var(--led-filter-yellow);
-webkit-animation: var(--led-spin-slow);
animation: var(--led-spin-slow);
img.led-red-rotating-fast {
-webkit-filter: var(--led-filter-red);
filter: var(--led-filter-red);
-webkit-animation: var(--led-spin-fast);
animation: var(--led-spin-fast);
}
img.led-yellow-rotating-fast {

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

@ -26,6 +26,7 @@
import {tools, $, $$$} from "../tools.js";
import {wm} from "../wm.js";
import {Recorder} from "./recorder.js";
import {Keyboard} from "./keyboard.js";
import {Mouse} from "./mouse.js";
@ -35,10 +36,15 @@ export function Hid() {
/************************************************************************/
var __keyboard = new Keyboard();
var __mouse = new Mouse();
var __recorder = null;
var __keyboard = null;
var __mouse = null;
var __init__ = function() {
__recorder = new Recorder();
__keyboard = new Keyboard(__recorder.recordWsEvent);
__mouse = new Mouse(__recorder.recordWsEvent);
let hidden_attr = null;
let visibility_change_attr = null;
@ -82,6 +88,7 @@ export function Hid() {
wm.switchEnabled($("hid-pak-text"), ws);
wm.switchEnabled($("hid-pak-button"), ws);
wm.switchEnabled($("hid-reset-button"), ws);
__recorder.setSocket(ws);
__keyboard.setSocket(ws);
__mouse.setSocket(ws);
};
@ -146,6 +153,8 @@ export function Hid() {
wm.error("Too many text for paste!");
} else if (http.status !== 200) {
wm.error("HID paste error:<br>", http.responseText);
} else if (http.status === 200) {
__recorder.recordPrintEvent(text);
}
}
}, text, "text/plain");

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

@ -24,11 +24,13 @@ import {tools, $, $$$} from "../tools.js";
import {Keypad} from "../keypad.js";
export function Keyboard() {
export function Keyboard(record_callback) {
var self = this;
/************************************************************************/
var __record_callback = record_callback;
var __ws = null;
var __online = true;
@ -136,12 +138,14 @@ export function Keyboard() {
var __sendKey = function(code, state) {
tools.debug("Keyboard: key", (state ? "pressed:" : "released:"), code);
let event = {
"event_type": "key",
"event": {"key": code, "state": state},
};
if (__ws) {
__ws.send(JSON.stringify({
"event_type": "key",
"event": {"key": code, "state": state},
}));
__ws.send(JSON.stringify(event));
}
__record_callback(event);
};
__init__();

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

@ -27,11 +27,13 @@ import {tools, $} from "../tools.js";
import {Keypad} from "../keypad.js";
export function Mouse() {
export function Mouse(record_callback) {
var self = this;
/************************************************************************/
var __record_callback = record_callback;
var __ws = null;
var __online = true;
@ -194,9 +196,11 @@ export function Mouse() {
};
var __sendEvent = function(event_type, event) {
event = {"event_type": event_type, "event": event};
if (__ws) {
__ws.send(JSON.stringify({"event_type": event_type, "event": event}));
__ws.send(JSON.stringify(event));
}
__record_callback(event);
};
__init__();

258
web/share/js/kvm/recorder.js Normal file
View File

@ -0,0 +1,258 @@
/*****************************************************************************
# #
# 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/>. #
# #
*****************************************************************************/
"use strict";
import {tools, $} from "../tools.js";
import {wm} from "../wm.js";
export function Recorder() {
var self = this;
/************************************************************************/
var __ws = null;
var __play_timer = null;
var __recording = false;
var __record = [];
var __record_time = 0;
var __last_event_ts = 0;
var __init__ = function() {
tools.setOnClick($("hid-recorder-record"), __startRecord);
tools.setOnClick($("hid-recorder-stop"), __stopProcess);
tools.setOnClick($("hid-recorder-play"), __playRecord);
tools.setOnClick($("hid-recorder-clear"), __clearRecord);
$("hid-recorder-new-script-file").onchange = __uploadScript;
tools.setOnClick($("hid-recorder-upload"), () => $("hid-recorder-new-script-file").click());
tools.setOnClick($("hid-recorder-download"), __downloadScript);
};
/************************************************************************/
self.setSocket = function(ws) {
if (ws !== __ws) {
__ws = ws;
}
if (__ws === null) {
__stopProcess();
}
__refresh();
};
self.recordWsEvent = function(event) {
__recordEvent(event);
};
self.recordPrintEvent = function(text) {
__recordEvent({"event_type": "print", "event": {"text": text}});
};
var __recordEvent = function(event) {
if (__recording) {
let now = new Date().getTime();
if (__last_event_ts) {
let delay = now - __last_event_ts;
__record.push({"event_type": "delay", "event": {"millis": delay}});
__record_time += delay;
}
__last_event_ts = now;
__record.push(event);
__setCounters(__record.length, __record_time);
}
};
var __startRecord = function() {
__clearRecord();
__recording = true;
__refresh();
};
var __stopProcess = function() {
if (__play_timer) {
clearTimeout(__play_timer);
__play_timer = null;
}
if (__recording) {
__recording = false;
}
__refresh();
};
var __playRecord = function() {
__play_timer = setTimeout(() => __runEvents(0), 0);
__refresh();
};
var __clearRecord = function() {
__record = [];
__record_time = 0;
__last_event_ts = 0;
__refresh();
};
var __downloadScript = function() {
let blob = new Blob([JSON.stringify(__record, undefined, 4)], {"type": "application/json"});
let url = window.URL.createObjectURL(blob);
let el_anchor = document.createElement("a");
el_anchor.href = url;
el_anchor.download = "script.json";
el_anchor.click();
window.URL.revokeObjectURL(url);
};
var __uploadScript = function() {
let el_input = $("hid-recorder-new-script-file");
let script_file = (el_input.files.length ? el_input.files[0] : null);
if (script_file) {
let reader = new FileReader();
reader.onload = function () {
let record = [];
let record_time = 0;
try {
let raw_record = JSON.parse(reader.result);
console.log(typeof raw_record);
console.log(raw_record);
__checkType(raw_record, "object", "Base of script is not an objects list");
for (let event of raw_record) {
__checkType(event, "object", "Non-dict event");
__checkType(event.event, "object", "Non-dict event");
if (event.event_type === "delay") {
__checkInt(event.event.millis, "Non-integer delay");
if (event.event.millis < 0) {
throw "Negative delay";
}
record_time += event.event.millis;
} else if (event.event_type === "print") {
__checkType(event.event.text, "string", "Non-string print text");
} else if (event.event_type === "key") {
__checkType(event.event.key, "string", "Non-string key code");
__checkType(event.event.state, "boolean", "Non-bool key state");
} else if (event.event_type === "mouse_button") {
__checkType(event.event.button, "string", "Non-string mouse button code");
__checkType(event.event.state, "boolean", "Non-bool mouse button state");
} else if (event.event_type === "mouse_move") {
__checkType(event.event.to, "object", "Non-object mouse move target");
__checkInt(event.event.to.x, "Non-int mouse move X");
__checkInt(event.event.to.y, "Non-int mouse move Y");
} else if (event.event_type === "mouse_wheel") {
__checkType(event.event.delta, "object", "Non-object mouse wheel delta");
__checkInt(event.event.delta.x, "Non-int mouse delta X");
__checkInt(event.event.delta.y, "Non-int mouse delta Y");
} else {
throw "Unknown event type";
}
record.push(event);
}
__record = record;
__record_time = record_time;
} catch (err) {
wm.error(`Invalid script: ${err}`);
}
el_input.value = "";
__refresh();
};
reader.readAsText(script_file, "UTF-8");
}
};
var __checkType = function(obj, type, msg) {
if (typeof obj !== type) {
throw msg;
}
};
var __checkInt = function(obj, msg) {
if (!Number.isInteger(obj)) {
throw msg;
}
};
var __runEvents = function(index, time=0) {
while (index < __record.length) {
__setCounters(__record.length - index + 1, __record_time - time);
let event = __record[index];
if (event.event_type === "delay") {
__play_timer = setTimeout(() => __runEvents(index + 1, time + event.event.millis), event.event.millis);
return;
} else if (event.event_type === "print") {
let http = tools.makeRequest("POST", "/api/hid/print?limit=0", function() {
if (http.readyState === 4) {
if (http.status === 413) {
wm.error("Too many text for paste!");
__stopProcess();
} else if (http.status !== 200) {
wm.error("HID paste error:<br>", http.responseText);
__stopProcess();
} else if (http.status === 200) {
__play_timer = setTimeout(() => __runEvents(index + 1, time), 0);
}
}
}, event.event.text, "text/plain");
return;
} else if (event.event_type in ["key", "mouse_button", "mouse_move", "mouse_wheel"]) {
__ws.send(JSON.stringify(event));
}
index += 1;
}
__stopProcess();
};
var __refresh = function() {
if (__play_timer) {
$("hid-recorder-led").className = "led-yellow-rotating-fast";
$("hid-recorder-led").title = "Playing...";
} else if (__recording) {
$("hid-recorder-led").className = "led-red-rotating-fast";
$("hid-recorder-led").title = "Recording...";
} else {
$("hid-recorder-led").className = "led-gray";
$("hid-recorder-led").title = "";
}
wm.switchEnabled($("hid-recorder-record"), (__ws && !__play_timer && !__recording));
wm.switchEnabled($("hid-recorder-stop"), (__ws && (__play_timer || __recording)));
wm.switchEnabled($("hid-recorder-play"), (__ws && !__recording && __record.length));
wm.switchEnabled($("hid-recorder-clear"), (!__play_timer && !__recording && __record.length));
wm.switchEnabled($("hid-recorder-upload"), (!__play_timer && !__recording));
wm.switchEnabled($("hid-recorder-download"), (!__play_timer && !__recording && __record.length));
__setCounters(__record.length, __record_time);
};
var __setCounters = function(events_count, time) {
$("hid-recorder-time").innerHTML = tools.formatDuration(time);
$("hid-recorder-events-count").innerHTML = events_count;
};
__init__();
}

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

@ -64,6 +64,17 @@ export var tools = new function() {
}
};
this.formatDuration = function(duration) {
let millis = parseInt((duration % 1000) / 100);
let secs = Math.floor((duration / 1000) % 60);
let mins = Math.floor((duration / (1000 * 60)) % 60);
let hours = Math.floor((duration / (1000 * 60 * 60)) % 24);
hours = (hours < 10 ? "0" + hours : hours);
mins = (mins < 10 ? "0" + mins : mins);
secs = (secs < 10 ? "0" + secs : secs);
return `${hours}:${mins}:${secs}.${millis}`;
};
/************************************************************************/
this.getCookie = function(name) {