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

refactoring

Browse Source
This commit is contained in:
Devaev Maxim 2018-08-13 03:56:05 +03:00
parent 798bc37fce
commit b2a05bd1ab
11 changed files with 307 additions and 212 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
kvmd/eslintrc.yaml
View File

@ -1,13 +1,13 @@
globals: globals:
atx: true Atx: true
hid: true Hid: true
keyboard: true Keyboard: true
mouse: true Mouse: true
msd: true Msd: true
session: true Session: true
stream: true Stream: true
Ui: true
tools: true tools: true
ui: true
"$": true "$": true
"$$": true "$$": true

64
kvmd/web/index.html
View File

@ -46,21 +46,17 @@
System ↴ System ↴
</a> </a>
<div class="ctl-dropdown-content"> <div class="ctl-dropdown-content">
<button onclick="ui.showWindow('about-window')">&bull; Show about</button> <button id="show-about-button">&bull; Show about</button>
<hr> <hr>
<button onclick="ui.showWindow('keyboard-window')">&bull; Show keyboard</button> <button id="show-keyboard-button">&bull; Show keyboard</button>
<hr> <hr>
<button onclick="ui.showWindow('stream-window')">&bull; Show stream</button> <button id="show-stream-button">&bull; Show stream</button>
<button disabled id="stream-reset-button" onclick="stream.clickResetButton();">&bull; Reset stream</button> <button disabled id="stream-reset-button">&bull; Reset stream</button>
<hr> <hr>
<div data-dont-hide-menu id="stream-size"> <div data-dont-hide-menu id="stream-size">
Stream size: <span id="stream-size-counter">100%</span> Stream size: <span id="stream-size-counter">100%</span>
<div id="stream-size-slider-box"> <div id="stream-size-slider-box">
<input <input id="stream-size-slider" type="range" min="50" max="150" value="100" step="10" />
type="range" min="50" max="150" value="100" step="10"
oninput="stream.resize(this.value);"
onchange="stream.resize(this.value);"
/>
</div> </div>
</div> </div>
</div> </div>
@ -75,10 +71,10 @@
ATX &#8628; ATX &#8628;
</a> </a>
<div class="ctl-dropdown-content"> <div class="ctl-dropdown-content">
<button disabled id="atx-power-button" onclick="atx.clickButton(this);">&bull; Click Power <sup><i>short</i></sup></button> <button disabled id="atx-power-button">&bull; Click Power <sup><i>short</i></sup></button>
<button disabled id="atx-power-button-long" onclick="atx.clickButton(this);">&bull; Click Power <sup><i>long</i></sup></button> <button disabled id="atx-power-button-long">&bull; Click Power <sup><i>long</i></sup></button>
<hr> <hr>
<button disabled id="atx-reset-button" onclick="atx.clickButton(this);">&bull; Click Reset</button> <button disabled id="atx-reset-button">&bull; Click Reset</button>
</div> </div>
</div> </div>
</li> </li>
@ -150,11 +146,11 @@
</table> </table>
<hr> <hr>
<input type="file" id="msd-select-new-image-file" onchange="msd.selectNewImageFile()" /> <input type="file" id="msd-select-new-image-file" />
<div class="buttons-row"> <div class="buttons-row">
<button disabled id="msd-select-new-image-button" class="row50" onclick="document.getElementById('msd-select-new-image-file').click();">Upload new image</button> <button disabled id="msd-select-new-image-button" class="row50">Upload new image</button>
<button disabled id="msd-upload-new-image-button" class="row25" onclick="msd.clickButton(this);">Start</button> <button disabled id="msd-upload-new-image-button" class="row25">Start</button>
<button disabled id="msd-abort-uploading-button" class="row25" onclick="msd.clickButton(this);">Abort</button> <button disabled id="msd-abort-uploading-button" class="row25">Abort</button>
</div> </div>
<hr> <hr>
@ -179,8 +175,8 @@
</div> </div>
<div class="buttons-row"> <div class="buttons-row">
<button disabled data-force-hide-menu id="msd-switch-to-kvm-button" class="row50" onclick="msd.clickButton(this);">&bull; Switch drive to KVM</button> <button disabled data-force-hide-menu id="msd-switch-to-kvm-button" class="row50">&bull; Switch drive to KVM</button>
<button disabled data-force-hide-menu id="msd-switch-to-server-button" class="row50" onclick="msd.clickButton(this);">&bull; Switch drive to Server</button> <button disabled data-force-hide-menu id="msd-switch-to-server-button" class="row50">&bull; Switch drive to Server</button>
</div> </div>
</div> </div>
</div> </div>
@ -195,25 +191,25 @@
<div class="ctl-dropdown-content"> <div class="ctl-dropdown-content">
<button disabled id="pak-button">&bull; Paste-as-Keys <sup><i>ascii-only</i></sup></button> <button disabled id="pak-button">&bull; Paste-as-Keys <sup><i>ascii-only</i></sup></button>
<hr> <hr>
<button onclick="hid.emitShortcut('ControlLeft', 'AltLeft', 'Delete');">&bull; Ctrl+Alt+Del</button> <button class="shortcut" data-shortcut="ControlLeft AltLeft Delete">&bull; Ctrl+Alt+Del</button>
<hr> <hr>
<button onclick="hid.emitShortcut('ControlLeft', 'KeyW');">&bull; Ctrl+W</button> <button class="shortcut" data-shortcut="ControlLeft KeyW">&bull; Ctrl+W</button>
<button onclick="hid.emitShortcut('ControlLeft', 'Escape');">&bull; Ctrl+Esc</button> <button class="shortcut" data-shortcut="ControlLeft Escape">&bull; Ctrl+Esc</button>
<button onclick="hid.emitShortcut('AltLeft', 'Tab');">&bull; Alt+Tab</button> <button class="shortcut" data-shortcut="AltLeft Tab">&bull; Alt+Tab</button>
<button onclick="hid.emitShortcut('AltLeft', 'Escape');">&bull; Alt+Escape</button> <button class="shortcut" data-shortcut="AltLeft Escape">&bull; Alt+Escape</button>
<button onclick="hid.emitShortcut('AltLeft', 'Space');">&bull; Alt+Space</button> <button class="shortcut" data-shortcut="AltLeft Space">&bull; Alt+Space</button>
<button onclick="hid.emitShortcut('AltLeft', 'Enter');">&bull; Alt+Enter</button> <button class="shortcut" data-shortcut="AltLeft Enter">&bull; Alt+Enter</button>
<button onclick="hid.emitShortcut('AltLeft', 'F4');">&bull; Alt+F4</button> <button class="shortcut" data-shortcut="AltLeft F4">&bull; Alt+F4</button>
<hr> <hr>
<button onclick="hid.emitShortcut('AltLeft', 'PrintScreen');">&bull; Alt+PrtSc</button> <button class="shortcut" data-shortcut="AltLeft PrintScreen">&bull; Alt+PrtSc</button>
<button onclick="hid.emitShortcut('PrintScreen');">&bull; PrtSc</button> <button class="shortcut" data-shortcut="PrintScreen">&bull; PrtSc</button>
<hr> <hr>
<button onclick="hid.emitShortcut('AltLeft', 'PrintScreen', 'KeyR');">&bull; Alt+SysRq+R</button> <button class="shortcut" data-shortcut="AltLeft PrintScreen KeyR">&bull; Alt+SysRq+R</button>
<button onclick="hid.emitShortcut('AltLeft', 'PrintScreen', 'KeyE');">&bull; Alt+SysRq+E</button> <button class="shortcut" data-shortcut="AltLeft PrintScreen KeyE">&bull; Alt+SysRq+E</button>
<button onclick="hid.emitShortcut('AltLeft', 'PrintScreen', 'KeyI');">&bull; Alt+SysRq+I</button> <button class="shortcut" data-shortcut="AltLeft PrintScreen KeyI">&bull; Alt+SysRq+I</button>
<button onclick="hid.emitShortcut('AltLeft', 'PrintScreen', 'KeyS');">&bull; Alt+SysRq+S</button> <button class="shortcut" data-shortcut="AltLeft PrintScreen KeyS">&bull; Alt+SysRq+S</button>
<button onclick="hid.emitShortcut('AltLeft', 'PrintScreen', 'KeyU');">&bull; Alt+SysRq+U</button> <button class="shortcut" data-shortcut="AltLeft PrintScreen KeyU">&bull; Alt+SysRq+U</button>
<button onclick="hid.emitShortcut('AltLeft', 'PrintScreen', 'KeyB');">&bull; Alt+SysRq+B</button> <button class="shortcut" data-shortcut="AltLeft PrintScreen KeyB">&bull; Alt+SysRq+B</button>
</div> </div>
</div> </div>
</li> </li>

77
kvmd/web/js/atx.js
View File

@ -1,53 +1,44 @@
var atx = new function() { function Atx() {
this.loadInitialState = function() { var self = this;
/********************************************************************************/
var __init__ = function() {
$("atx-power-led").title = "Power Led";
$("atx-hdd-led").title = "Disk Activity Led";
$("atx-power-button").onclick = () => __clickButton("power", null, "Are you sure to click the power button?");
$("atx-power-button-long").onclick = () => __clickButton("power_long", 15000, "Are you sure to perform the long press of the power button?");
$("atx-reset-button").onclick = () => __clickButton("reset", null, "Are you sure to reboot the server?");
};
/********************************************************************************/
self.loadInitialState = function() {
var http = tools.makeRequest("GET", "/kvmd/atx", function() { var http = tools.makeRequest("GET", "/kvmd/atx", function() {
if (http.readyState === 4) { if (http.readyState === 4) {
if (http.status === 200) { if (http.status === 200) {
atx.setButtonsBusy(JSON.parse(http.responseText).result.busy); __setButtonsBusy(JSON.parse(http.responseText).result.busy);
} else { } else {
setTimeout(atx.loadInitialState, 1000); setTimeout(self.loadInitialState, 1000);
} }
} }
}); });
}; };
this.setState = function(state) { self.setState = function(state) {
atx.setButtonsBusy(state.busy); __setButtonsBusy(state.busy);
$("atx-power-led").className = (state.leds.power ? "led-on" : "led-off"); $("atx-power-led").className = (state.leds.power ? "led-on" : "led-off");
$("atx-hdd-led").className = (state.leds.hdd ? "led-hdd-busy" : "led-off"); $("atx-hdd-led").className = (state.leds.hdd ? "led-hdd-busy" : "led-off");
}; };
this.clearState = function() { self.clearState = function() {
[ $("atx-power-led").className = "led-off";
"atx-power-led", $("atx-hdd-led").className = "led-off";
"atx-hdd-led",
].forEach(function(name) {
$(name).className = "led-off";
});
}; };
this.clickButton = function(el_button) { var __clickButton = function(button, timeout, confirm_msg) {
var button = null; if (confirm(confirm_msg)) {
var confirm_msg = null;
var timeout = null;
switch (el_button.id) {
case "atx-power-button":
button = "power";
confirm_msg = "Are you sure to click the power button?";
break;
case "atx-power-button-long":
button = "power_long";
confirm_msg = "Are you sure to perform the long press of the power button?";
timeout = 15000;
break;
case "atx-reset-button":
button = "reset";
confirm_msg = "Are you sure to reboot the server?";
break;
}
if (button && confirm(confirm_msg)) {
var http = tools.makeRequest("POST", "/kvmd/atx/click?button=" + button, function() { var http = tools.makeRequest("POST", "/kvmd/atx/click?button=" + button, function() {
if (http.readyState === 4) { if (http.readyState === 4) {
if (http.status === 409) { if (http.status === 409) {
@ -60,13 +51,11 @@ var atx = new function() {
} }
}; };
this.setButtonsBusy = function(busy) { var __setButtonsBusy = function(busy) {
[ $("atx-power-button").disabled = busy;
"atx-power-button", $("atx-power-button-long").disabled = busy;
"atx-power-button-long", $("atx-reset-button").disabled = busy;
"atx-reset-button",
].forEach(function(name) {
document.getElementById(name).disabled = busy;
});
};
}; };
__init__();
}

50
kvmd/web/js/hid.js
View File

@ -1,36 +1,48 @@
var hid = new function() { function Hid() {
var self = this;
/********************************************************************************/
var __ws = null; var __ws = null;
var __chars_to_codes = {}; var __chars_to_codes = {};
var __codes_delay = 50; var __codes_delay = 50;
this.init = function() { var __keyboard = new Keyboard();
keyboard.init(); var __mouse = new Mouse();
mouse.init();
var __init__ = function() {
if (window.navigator.clipboard && window.navigator.clipboard.readText) { if (window.navigator.clipboard && window.navigator.clipboard.readText) {
__chars_to_codes = __buildCharsToCodes(); __chars_to_codes = __buildCharsToCodes();
$("pak-button").onclick = __pasteAsKeys; $("pak-button").onclick = __pasteAsKeys;
} else { } else {
$("pak-button").title = "Your browser does not support the Clipboard API.\nUse Google Chrome or Chromium."; $("pak-button").title = $("pak-led").title = "Your browser does not support the Clipboard API.\nUse Google Chrome or Chromium.";
} }
Array.prototype.forEach.call($$("shortcut"), function(el_shortcut) {
el_shortcut.onclick = () => __emitShortcut(el_shortcut.getAttribute("data-shortcut").split(" "));
});
}; };
this.setSocket = function(ws) { /********************************************************************************/
self.setSocket = function(ws) {
__ws = ws; __ws = ws;
keyboard.setSocket(ws); __keyboard.setSocket(ws);
mouse.setSocket(ws); __mouse.setSocket(ws);
$("pak-button").disabled = !(window.navigator.clipboard && window.navigator.clipboard.readText && ws); $("pak-button").disabled = !(window.navigator.clipboard && window.navigator.clipboard.readText && ws);
}; };
this.updateLeds = function() { self.updateLeds = function() {
keyboard.updateLeds(); __keyboard.updateLeds();
mouse.updateLeds(); __mouse.updateLeds();
}; };
this.releaseAll = function() { self.releaseAll = function() {
keyboard.releaseAll(); __keyboard.releaseAll();
}; };
this.emitShortcut = function(...codes) { var __emitShortcut = function(codes) {
return new Promise(function(resolve) { return new Promise(function(resolve) {
tools.debug("Emitting keys:", codes); tools.debug("Emitting keys:", codes);
@ -44,7 +56,7 @@ var hid = new function() {
var index = 0; var index = 0;
var iterate = () => setTimeout(function() { var iterate = () => setTimeout(function() {
keyboard.fireEvent(raw_events[index].code, raw_events[index].state); __keyboard.fireEvent(raw_events[index].code, raw_events[index].state);
++index; ++index;
if (index < raw_events.length) { if (index < raw_events.length) {
iterate(); iterate();
@ -118,18 +130,20 @@ var hid = new function() {
if (codes_count <= 256 || confirm(confirm_msg)) { if (codes_count <= 256 || confirm(confirm_msg)) {
$("pak-button").disabled = true; $("pak-button").disabled = true;
$("pak-led").className = "led-pak-typing"; $("pak-led").className = "led-pak-typing";
$("pak-led").title = "Autotyping...";
tools.debug("Paste-as-keys:", clipboard_text); tools.debug("Paste-as-keys:", clipboard_text);
var index = 0; var index = 0;
var iterate = function() { var iterate = function() {
hid.emitShortcut(...clipboard_codes[index]).then(function() { __emitShortcut(clipboard_codes[index]).then(function() {
++index; ++index;
if (index < clipboard_codes.length && __ws) { if (index < clipboard_codes.length && __ws) {
iterate(); iterate();
} else { } else {
$("pak-button").disabled = false; $("pak-button").disabled = false;
$("pak-led").className = "led-off"; $("pak-led").className = "led-off";
$("pak-led").title = "";
} }
}); });
}; };
@ -138,4 +152,6 @@ var hid = new function() {
} }
}); });
}; };
};
__init__();
}

49
kvmd/web/js/keyboard.js
View File

@ -1,4 +1,13 @@
var keyboard = new function() { function Keyboard() {
var self = this;
/********************************************************************************/
var __ws = null;
var __keys = [];
var __modifiers = [];
var __mac_cmd_hook = (( var __mac_cmd_hook = ((
window.navigator.oscpu window.navigator.oscpu
|| window.navigator.platform || window.navigator.platform
@ -6,11 +15,9 @@ var keyboard = new function() {
|| "Unknown" || "Unknown"
).indexOf("Mac") !== -1); ).indexOf("Mac") !== -1);
var __ws = null; var __init__ = function() {
var __keys = []; $("hid-keyboard-led").title = "Keyboard free";
var __modifiers = [];
this.init = function() {
$("keyboard-window").onkeydown = (event) => __keyboardHandler(event, true); $("keyboard-window").onkeydown = (event) => __keyboardHandler(event, true);
$("keyboard-window").onkeyup = (event) => __keyboardHandler(event, false); $("keyboard-window").onkeyup = (event) => __keyboardHandler(event, false);
@ -27,6 +34,7 @@ var keyboard = new function() {
}; };
__keys.push(el_key); __keys.push(el_key);
}); });
Array.prototype.forEach.call($$("modifier"), function(el_key) { Array.prototype.forEach.call($$("modifier"), function(el_key) {
el_key.onmousedown = () => __toggleModifierHandler(el_key); el_key.onmousedown = () => __toggleModifierHandler(el_key);
__modifiers.push(el_key); __modifiers.push(el_key);
@ -37,28 +45,35 @@ var keyboard = new function() {
} }
}; };
this.setSocket = function(ws) { /********************************************************************************/
self.setSocket = function(ws) {
if (ws !== __ws) { if (ws !== __ws) {
keyboard.releaseAll(); self.releaseAll();
__ws = ws; __ws = ws;
} }
keyboard.updateLeds(); self.updateLeds();
}; };
this.updateLeds = function() { self.updateLeds = function() {
var focused = (__ws && (document.activeElement === $("stream-window") || document.activeElement === $("keyboard-window"))); if (__ws && (document.activeElement === $("stream-window") || document.activeElement === $("keyboard-window"))) {
$("hid-keyboard-led").className = (focused ? "led-on" : "led-off"); $("hid-keyboard-led").className = "led-on";
$("hid-keyboard-led").title = "Keyboard captured";
} else {
$("hid-keyboard-led").className = "led-off";
$("hid-keyboard-led").title = "Keyboard free";
}
}; };
this.releaseAll = function() { self.releaseAll = function() {
__keys.concat(__modifiers).forEach(function(el_key) { __keys.concat(__modifiers).forEach(function(el_key) {
if (__isActive(el_key)) { if (__isActive(el_key)) {
keyboard.fireEvent(el_key.id, false); self.fireEvent(el_key.id, false);
} }
}); });
}; };
this.fireEvent = function(code, state) { self.fireEvent = function(code, state) {
$("keyboard-window").dispatchEvent(new KeyboardEvent( $("keyboard-window").dispatchEvent(new KeyboardEvent(
(state ? "keydown" : "keyup"), (state ? "keydown" : "keyup"),
{code: code} {code: code}
@ -77,7 +92,7 @@ var keyboard = new function() {
__keys.forEach(function(el_key) { __keys.forEach(function(el_key) {
if (__isActive(el_key)) { if (__isActive(el_key)) {
// __commonHandler(el_key, false, "pressed"); // __commonHandler(el_key, false, "pressed");
keyboard.fireEvent(el_key.id, false); self.fireEvent(el_key.id, false);
} }
}); });
} }
@ -142,4 +157,6 @@ var keyboard = new function() {
})); }));
} }
}; };
};
__init__();
}

9
kvmd/web/js/main.js
View File

@ -1,7 +1,6 @@
function main() { function main() {
ui.init(); var hid = new Hid();
hid.init(); new Session(new Atx(), hid, new Msd());
session.loadKvmdVersion(); new Stream();
session.startPoller(); new Ui(hid);
stream.startPoller();
} }

54
kvmd/web/js/mouse.js
View File

@ -1,22 +1,32 @@
var mouse = new function() { function Mouse() {
var self = this;
/********************************************************************************/
var __ws = null; var __ws = null;
var __current_pos = {x: 0, y:0}; var __current_pos = {x: 0, y:0};
var __sent_pos = {x: 0, y:0}; var __sent_pos = {x: 0, y:0};
var __stream_hovered = false; var __stream_hovered = false;
this.init = function() { var __init__ = function() {
var el_stream_box = $("stream-box"); $("hid-mouse-led").title = "Mouse free";
el_stream_box.onmouseenter = __hoverStream;
el_stream_box.onmouseleave = __leaveStream; $("stream-box").onmouseenter = __hoverStream;
el_stream_box.onmousedown = (event) => __buttonHandler(event, true); $("stream-box").onmouseleave = __leaveStream;
el_stream_box.onmouseup = (event) => __buttonHandler(event, false); $("stream-box").onmousedown = (event) => __buttonHandler(event, true);
el_stream_box.oncontextmenu = (event) => event.preventDefault(); $("stream-box").onmouseup = (event) => __buttonHandler(event, false);
el_stream_box.onmousemove = __moveHandler; $("stream-box").oncontextmenu = (event) => event.preventDefault();
el_stream_box.onwheel = (event) => __wheelHandler(event); $("stream-box").onmousemove = __moveHandler;
$("stream-box").onwheel = __wheelHandler;
setInterval(__sendMove, 100); setInterval(__sendMove, 100);
}; };
this.setSocket = function(ws) { /********************************************************************************/
self.setSocket = function(ws) {
__ws = ws; __ws = ws;
if (ws) { if (ws) {
$("stream-box").classList.add("stream-box-mouse-enabled"); $("stream-box").classList.add("stream-box-mouse-enabled");
@ -25,18 +35,24 @@ var mouse = new function() {
} }
}; };
self.updateLeds = function() {
if (__ws && __stream_hovered) {
$("hid-mouse-led").className = "led-on";
$("hid-mouse-led").title = "Mouse tracked";
} else {
$("hid-mouse-led").className = "led-off";
$("hid-mouse-led").title = "Mouse free";
}
};
var __hoverStream = function() { var __hoverStream = function() {
__stream_hovered = true; __stream_hovered = true;
mouse.updateLeds(); self.updateLeds();
}; };
var __leaveStream = function() { var __leaveStream = function() {
__stream_hovered = false; __stream_hovered = false;
mouse.updateLeds(); self.updateLeds();
};
this.updateLeds = function() {
$("hid-mouse-led").className = (__ws && __stream_hovered ? "led-on" : "led-off");
}; };
var __buttonHandler = function(event, state) { var __buttonHandler = function(event, state) {
@ -105,4 +121,6 @@ var mouse = new function() {
})); }));
} }
}; };
};
__init__();
}

56
kvmd/web/js/msd.js
View File

@ -1,27 +1,45 @@
var msd = new function() { function Msd() {
var self = this;
/********************************************************************************/
var __state = null; var __state = null;
var __upload_http = null; var __upload_http = null;
var __image_file = null; var __image_file = null;
this.loadInitialState = function() { var __init__ = function() {
$("msd-led").title = "Unknown state";
$("msd-select-new-image-file").onchange = __selectNewImageFile;
$("msd-select-new-image-button").onclick = () => $("msd-select-new-image-file").click();
$("msd-upload-new-image-button").onclick = __clickUploadNewImageButton;
$("msd-abort-uploading-button").onclick = __clickAbortUploadingButton;
$("msd-switch-to-kvm-button").onclick = () => __clickSwitchButton("kvm");
$("msd-switch-to-server-button").onclick = () => __clickSwitchButton("server");
};
/********************************************************************************/
self.loadInitialState = function() {
var http = tools.makeRequest("GET", "/kvmd/msd", function() { var http = tools.makeRequest("GET", "/kvmd/msd", function() {
if (http.readyState === 4) { if (http.readyState === 4) {
if (http.status === 200) { if (http.status === 200) {
msd.setState(JSON.parse(http.responseText).result); self.setState(JSON.parse(http.responseText).result);
} else { } else {
setTimeout(msd.loadInitialState, 1000); setTimeout(self.loadInitialState, 1000);
} }
} }
}); });
}; };
this.setState = function(state) { self.setState = function(state) {
__state = state; __state = state;
__applyState(); __applyState();
}; };
this.clickButton = function(el_button) { var __clickUploadNewImageButton = function() {
if (el_button.id === "msd-upload-new-image-button") {
var form_data = new FormData(); var form_data = new FormData();
form_data.append("image_name", __image_file.name); form_data.append("image_name", __image_file.name);
form_data.append("image_data", __image_file); form_data.append("image_data", __image_file);
@ -32,17 +50,18 @@ var msd = new function() {
__upload_http.onreadystatechange = __uploadStateChange; __upload_http.onreadystatechange = __uploadStateChange;
__upload_http.upload.onprogress = __uploadProgress; __upload_http.upload.onprogress = __uploadProgress;
__upload_http.send(form_data); __upload_http.send(form_data);
};
} else if (el_button.id === "msd-abort-uploading-button") { var __clickAbortUploadingButton = function() {
__upload_http.onreadystatechange = null; __upload_http.onreadystatechange = null;
__upload_http.upload.onprogress = null; __upload_http.upload.onprogress = null;
__upload_http.abort(); __upload_http.abort();
__upload_http = null; __upload_http = null;
$("msd-progress").setAttribute("data-label", "Aborted"); $("msd-progress").setAttribute("data-label", "Aborted");
$("msd-progress-value").style.width = "0%"; $("msd-progress-value").style.width = "0%";
};
} else if (el_button.id === "msd-switch-to-kvm-button" || el_button.id === "msd-switch-to-server-button") { var __clickSwitchButton = function(to) {
var to = (el_button.id === "msd-switch-to-kvm-button" ? "kvm" : "server");
var http = tools.makeRequest("POST", "/kvmd/msd/connect?to=" + to, function() { var http = tools.makeRequest("POST", "/kvmd/msd/connect?to=" + to, function() {
if (http.readyState === 4) { if (http.readyState === 4) {
if (http.status !== 200) { if (http.status !== 200) {
@ -52,11 +71,10 @@ var msd = new function() {
__applyState(); __applyState();
}); });
__applyState(); __applyState();
el_button.disabled = true; $("msd-switch-to-" + to + "-button").disabled = true;
}
}; };
this.selectNewImageFile = function() { var __selectNewImageFile = function() {
var el_input = $("msd-select-new-image-file"); var el_input = $("msd-select-new-image-file");
var image_file = (el_input.files.length ? el_input.files[0] : null); var image_file = (el_input.files.length ? el_input.files[0] : null);
if (image_file && image_file.size > __state.info.size) { if (image_file && image_file.size > __state.info.size) {
@ -72,21 +90,21 @@ var msd = new function() {
if (__state.connected_to === "server") { if (__state.connected_to === "server") {
$("msd-another-another-user-uploads").style.display = "none"; $("msd-another-another-user-uploads").style.display = "none";
$("msd-led").className = "led-on"; $("msd-led").className = "led-on";
$("msd-status").innerHTML = "Connected to Server"; $("msd-status").innerHTML = $("msd-led").title = "Connected to Server";
$("msd-another-another-user-uploads").style.display = "none"; $("msd-another-another-user-uploads").style.display = "none";
} else if (__state.busy) { } else if (__state.busy) {
if (!__upload_http) { if (!__upload_http) {
$("msd-another-another-user-uploads").style.display = "block"; $("msd-another-another-user-uploads").style.display = "block";
} }
$("msd-led").className = "led-msd-writing"; $("msd-led").className = "led-msd-writing";
$("msd-status").innerHTML = "Uploading new image"; $("msd-status").innerHTML = $("msd-led").title = "Uploading new image";
} else { } else {
$("msd-another-another-user-uploads").style.display = "none"; $("msd-another-another-user-uploads").style.display = "none";
$("msd-led").className = "led-off"; $("msd-led").className = "led-off";
if (__state.in_operate) { if (__state.in_operate) {
$("msd-status").innerHTML = "Connected to KVM"; $("msd-status").innerHTML = $("msd-led").title = "Connected to KVM";
} else { } else {
$("msd-status").innerHTML = "Unavailable"; $("msd-status").innerHTML = $("msd-led").title = "Unavailable";
} }
} }
@ -141,4 +159,6 @@ var msd = new function() {
$("msd-progress-value").style.width = percent + "%"; $("msd-progress-value").style.width = percent + "%";
} }
}; };
};
__init__();
}

29
kvmd/web/js/session.js
View File

@ -1,9 +1,22 @@
var session = new function() { function Session(atx, hid, msd) {
// var self = this;
/********************************************************************************/
var __ws = null; var __ws = null;
var __ping_timer = null; var __ping_timer = null;
var __missed_heartbeats = 0; var __missed_heartbeats = 0;
this.loadKvmdVersion = function() { var __init__ = function() {
$("link-led").title = "Not connected yet...";
__loadKvmdVersion();
__startPoller();
};
/********************************************************************************/
var __loadKvmdVersion = function() {
var http = tools.makeRequest("GET", "/kvmd/info", function() { var http = tools.makeRequest("GET", "/kvmd/info", function() {
if (http.readyState === 4) { if (http.readyState === 4) {
if (http.status === 200) { if (http.status === 200) {
@ -13,13 +26,13 @@ var session = new function() {
$("about-version-python").innerHTML = version.python; $("about-version-python").innerHTML = version.python;
$("about-version-platform").innerHTML = version.platform; $("about-version-platform").innerHTML = version.platform;
} else { } else {
setTimeout(session.loadKvmdVersion, 1000); setTimeout(__loadKvmdVersion, 1000);
} }
} }
}); });
}; };
this.startPoller = function() { var __startPoller = function() {
$("link-led").className = "led-link-connecting"; $("link-led").className = "led-link-connecting";
$("link-led").title = "Connecting..."; $("link-led").title = "Connecting...";
var http = tools.makeRequest("GET", "/wsauth", function() { var http = tools.makeRequest("GET", "/wsauth", function() {
@ -56,8 +69,6 @@ var session = new function() {
} else if (event.msg_type === "event") { } else if (event.msg_type === "event") {
if (event.msg.event === "atx_state") { if (event.msg.event === "atx_state") {
atx.setState(event.msg.event_attrs); atx.setState(event.msg.event_attrs);
// } else if (event.msg.event === "atx_click") {
// atx.setButtonsBusy(event.msg.event_attrs.button);
} else if (event.msg.event === "msd_state") { } else if (event.msg.event === "msd_state") {
msd.setState(event.msg.event_attrs); msd.setState(event.msg.event_attrs);
} }
@ -85,7 +96,7 @@ var session = new function() {
__ws = null; __ws = null;
setTimeout(function() { setTimeout(function() {
$("link-led").className = "led-link-connecting"; $("link-led").className = "led-link-connecting";
setTimeout(session.startPoller, 500); setTimeout(__startPoller, 500);
}, 500); }, 500);
}; };
@ -105,4 +116,6 @@ var session = new function() {
} }
} }
}; };
};
__init__();
}

34
kvmd/web/js/stream.js
View File

@ -1,9 +1,25 @@
var stream = new function() { function Stream() {
// var self = this;
/********************************************************************************/
var __prev_state = false; var __prev_state = false;
var __normal_size = {width: 640, height: 480}; var __normal_size = {width: 640, height: 480};
var __size_factor = 1; var __size_factor = 1;
this.startPoller = function() { var __init__ = function() {
$("stream-led").title = "Stream inactive";
$("stream-reset-button").onclick = __clickResetButton;
$("stream-size-slider").oninput = __resize;
$("stream-size-slider").onchange = __resize;
__startPoller();
};
/********************************************************************************/
var __startPoller = function() {
var http = tools.makeRequest("GET", "/streamer/?action=snapshot", function() { var http = tools.makeRequest("GET", "/streamer/?action=snapshot", function() {
if (http.readyState === 2 || http.readyState === 4) { if (http.readyState === 2 || http.readyState === 4) {
var status = http.status; var status = http.status;
@ -15,6 +31,7 @@ var stream = new function() {
$("stream-image").className = "stream-image-inactive"; $("stream-image").className = "stream-image-inactive";
$("stream-box").classList.add("stream-box-inactive"); $("stream-box").classList.add("stream-box-inactive");
$("stream-led").className = "led-off"; $("stream-led").className = "led-off";
$("stream-led").title = "Stream inactive";
$("stream-reset-button").disabled = true; $("stream-reset-button").disabled = true;
} else if (!__prev_state) { } else if (!__prev_state) {
__refreshImage(); __refreshImage();
@ -22,14 +39,15 @@ var stream = new function() {
$("stream-image").className = "stream-image-active"; $("stream-image").className = "stream-image-active";
$("stream-box").classList.remove("stream-box-inactive"); $("stream-box").classList.remove("stream-box-inactive");
$("stream-led").className = "led-on"; $("stream-led").className = "led-on";
$("stream-led").title = "Stream is active";
$("stream-reset-button").disabled = false; $("stream-reset-button").disabled = false;
} }
} }
}); });
setTimeout(stream.startPoller, 2000); setTimeout(__startPoller, 2000);
}; };
this.clickResetButton = function() { var __clickResetButton = function() {
$("stream-reset-button").disabled = true; $("stream-reset-button").disabled = true;
var http = tools.makeRequest("POST", "/kvmd/streamer/reset", function() { var http = tools.makeRequest("POST", "/kvmd/streamer/reset", function() {
if (http.readyState === 4) { if (http.readyState === 4) {
@ -40,7 +58,8 @@ var stream = new function() {
}); });
}; };
this.resize = function(percent) { var __resize = function() {
var percent = $("stream-size-slider").value;
$("stream-size-counter").innerHTML = percent + "%"; $("stream-size-counter").innerHTML = percent + "%";
__size_factor = percent / 100; __size_factor = percent / 100;
__applySizeFactor(); __applySizeFactor();
@ -58,8 +77,9 @@ var stream = new function() {
__normal_size = JSON.parse(http.responseText).result.size; __normal_size = JSON.parse(http.responseText).result.size;
__applySizeFactor(); __applySizeFactor();
$("stream-image").src = "/streamer/?action=stream&time=" + new Date().getTime(); $("stream-image").src = "/streamer/?action=stream&time=" + new Date().getTime();
ui.showWindow("stream-window");
} }
}); });
}; };
};
__init__();
}

29
kvmd/web/js/ui.js
View File

@ -1,18 +1,18 @@
var ui = new function() { function Ui(hid) {
var __top_z_index = 0; var __top_z_index = 0;
var __windows = []; var __windows = [];
var __ctl_items = []; var __ctl_items = [];
this.init = function() { /********************************************************************************/
var __init__ = function() {
Array.prototype.forEach.call($$("ctl-item"), function(el_item) { Array.prototype.forEach.call($$("ctl-item"), function(el_item) {
el_item.onclick = () => __toggleMenu(el_item); el_item.onclick = () => __toggleMenu(el_item);
__ctl_items.push(el_item); __ctl_items.push(el_item);
}); });
Array.prototype.forEach.call($$("window"), function(el_window) { Array.prototype.forEach.call($$("window"), function(el_window) {
var el_grab = el_window.querySelector(".window-header .window-grab"); __makeWindowMovable(el_window);
__makeWindowMovable(el_grab, el_window);
__windows.push(el_window); __windows.push(el_window);
var el_button = el_window.querySelector(".window-header .window-button-close"); var el_button = el_window.querySelector(".window-header .window-button-close");
@ -56,11 +56,16 @@ var ui = new function() {
window.onmouseup = __globalMouseButtonHandler; window.onmouseup = __globalMouseButtonHandler;
// window.oncontextmenu = __globalMouseButtonHandler; // window.oncontextmenu = __globalMouseButtonHandler;
ui.showWindow("stream-window"); $("show-about-button").onclick = () => __showWindow($("about-window"));
$("show-keyboard-button").onclick = () => __showWindow($("keyboard-window"));
$("show-stream-button").onclick = () => __showWindow($("stream-window"));
__showWindow($("stream-window"));
}; };
this.showWindow = function(id) { /********************************************************************************/
var el_window = $(id);
var __showWindow = function(el_window) {
if (!__isWindowOnPage(el_window) || el_window.hasAttribute("data-centered")) { if (!__isWindowOnPage(el_window) || el_window.hasAttribute("data-centered")) {
var view = __getViewGeometry(); var view = __getViewGeometry();
var rect = el_window.getBoundingClientRect(); var rect = el_window.getBoundingClientRect();
@ -147,7 +152,7 @@ var ui = new function() {
} }
}; };
var __makeWindowMovable = function(el_grab, el_window) { var __makeWindowMovable = function(el_window) {
var prev_x = 0; var prev_x = 0;
var prev_y = 0; var prev_y = 0;
@ -180,7 +185,7 @@ var ui = new function() {
} }
el_window.setAttribute("data-centered", ""); el_window.setAttribute("data-centered", "");
el_grab.onmousedown = startMoving; el_window.querySelector(".window-header .window-grab").onmousedown = startMoving;
el_window.onclick = () => __raiseWindow(el_window); el_window.onclick = () => __raiseWindow(el_window);
}; };
@ -207,4 +212,6 @@ var ui = new function() {
tools.debug("Raised window:", el_window); tools.debug("Raised window:", el_window);
} }
}; };
};
__init__();
}