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

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:
atx: true
hid: true
keyboard: true
mouse: true
msd: true
session: true
stream: true
Atx: true
Hid: true
Keyboard: true
Mouse: true
Msd: true
Session: true
Stream: true
Ui: true
tools: true
ui: true
"$": true
"$$": true

64
kvmd/web/index.html
View File

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

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

@ -1,53 +1,44 @@
var atx = new function() {
this.loadInitialState = function() {
function Atx() {
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() {
if (http.readyState === 4) {
if (http.status === 200) {
atx.setButtonsBusy(JSON.parse(http.responseText).result.busy);
__setButtonsBusy(JSON.parse(http.responseText).result.busy);
} else {
setTimeout(atx.loadInitialState, 1000);
setTimeout(self.loadInitialState, 1000);
}
}
});
};
this.setState = function(state) {
atx.setButtonsBusy(state.busy);
self.setState = function(state) {
__setButtonsBusy(state.busy);
$("atx-power-led").className = (state.leds.power ? "led-on" : "led-off");
$("atx-hdd-led").className = (state.leds.hdd ? "led-hdd-busy" : "led-off");
};
this.clearState = function() {
[
"atx-power-led",
"atx-hdd-led",
].forEach(function(name) {
$(name).className = "led-off";
});
self.clearState = function() {
$("atx-power-led").className = "led-off";
$("atx-hdd-led").className = "led-off";
};
this.clickButton = function(el_button) {
var button = null;
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 __clickButton = function(button, timeout, confirm_msg) {
if (confirm(confirm_msg)) {
var http = tools.makeRequest("POST", "/kvmd/atx/click?button=" + button, function() {
if (http.readyState === 4) {
if (http.status === 409) {
@ -60,13 +51,11 @@ var atx = new function() {
}
};
this.setButtonsBusy = function(busy) {
[
"atx-power-button",
"atx-power-button-long",
"atx-reset-button",
].forEach(function(name) {
document.getElementById(name).disabled = busy;
});
var __setButtonsBusy = function(busy) {
$("atx-power-button").disabled = busy;
$("atx-power-button-long").disabled = busy;
$("atx-reset-button").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 __chars_to_codes = {};
var __codes_delay = 50;
this.init = function() {
keyboard.init();
mouse.init();
var __keyboard = new Keyboard();
var __mouse = new Mouse();
var __init__ = function() {
if (window.navigator.clipboard && window.navigator.clipboard.readText) {
__chars_to_codes = __buildCharsToCodes();
$("pak-button").onclick = __pasteAsKeys;
} 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;
keyboard.setSocket(ws);
mouse.setSocket(ws);
__keyboard.setSocket(ws);
__mouse.setSocket(ws);
$("pak-button").disabled = !(window.navigator.clipboard && window.navigator.clipboard.readText && ws);
};
this.updateLeds = function() {
keyboard.updateLeds();
mouse.updateLeds();
self.updateLeds = function() {
__keyboard.updateLeds();
__mouse.updateLeds();
};
this.releaseAll = function() {
keyboard.releaseAll();
self.releaseAll = function() {
__keyboard.releaseAll();
};
this.emitShortcut = function(...codes) {
var __emitShortcut = function(codes) {
return new Promise(function(resolve) {
tools.debug("Emitting keys:", codes);
@ -44,7 +56,7 @@ var hid = new function() {
var index = 0;
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;
if (index < raw_events.length) {
iterate();
@ -118,18 +130,20 @@ var hid = new function() {
if (codes_count <= 256 || confirm(confirm_msg)) {
$("pak-button").disabled = true;
$("pak-led").className = "led-pak-typing";
$("pak-led").title = "Autotyping...";
tools.debug("Paste-as-keys:", clipboard_text);
var index = 0;
var iterate = function() {
hid.emitShortcut(...clipboard_codes[index]).then(function() {
__emitShortcut(clipboard_codes[index]).then(function() {
++index;
if (index < clipboard_codes.length && __ws) {
iterate();
} else {
$("pak-button").disabled = false;
$("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 = ((
window.navigator.oscpu
|| window.navigator.platform
@ -6,11 +15,9 @@ var keyboard = new function() {
|| "Unknown"
).indexOf("Mac") !== -1);
var __ws = null;
var __keys = [];
var __modifiers = [];
var __init__ = function() {
$("hid-keyboard-led").title = "Keyboard free";
this.init = function() {
$("keyboard-window").onkeydown = (event) => __keyboardHandler(event, true);
$("keyboard-window").onkeyup = (event) => __keyboardHandler(event, false);
@ -27,6 +34,7 @@ var keyboard = new function() {
};
__keys.push(el_key);
});
Array.prototype.forEach.call($$("modifier"), function(el_key) {
el_key.onmousedown = () => __toggleModifierHandler(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) {
keyboard.releaseAll();
self.releaseAll();
__ws = ws;
}
keyboard.updateLeds();
self.updateLeds();
};
this.updateLeds = function() {
var focused = (__ws && (document.activeElement === $("stream-window") || document.activeElement === $("keyboard-window")));
$("hid-keyboard-led").className = (focused ? "led-on" : "led-off");
self.updateLeds = function() {
if (__ws && (document.activeElement === $("stream-window") || document.activeElement === $("keyboard-window"))) {
$("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) {
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(
(state ? "keydown" : "keyup"),
{code: code}
@ -77,7 +92,7 @@ var keyboard = new function() {
__keys.forEach(function(el_key) {
if (__isActive(el_key)) {
// __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() {
ui.init();
hid.init();
session.loadKvmdVersion();
session.startPoller();
stream.startPoller();
var hid = new Hid();
new Session(new Atx(), hid, new Msd());
new Stream();
new Ui(hid);
}

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 __current_pos = {x: 0, y:0};
var __sent_pos = {x: 0, y:0};
var __stream_hovered = false;
this.init = function() {
var el_stream_box = $("stream-box");
el_stream_box.onmouseenter = __hoverStream;
el_stream_box.onmouseleave = __leaveStream;
el_stream_box.onmousedown = (event) => __buttonHandler(event, true);
el_stream_box.onmouseup = (event) => __buttonHandler(event, false);
el_stream_box.oncontextmenu = (event) => event.preventDefault();
el_stream_box.onmousemove = __moveHandler;
el_stream_box.onwheel = (event) => __wheelHandler(event);
var __init__ = function() {
$("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").oncontextmenu = (event) => event.preventDefault();
$("stream-box").onmousemove = __moveHandler;
$("stream-box").onwheel = __wheelHandler;
setInterval(__sendMove, 100);
};
this.setSocket = function(ws) {
/********************************************************************************/
self.setSocket = function(ws) {
__ws = ws;
if (ws) {
$("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() {
__stream_hovered = true;
mouse.updateLeds();
self.updateLeds();
};
var __leaveStream = function() {
__stream_hovered = false;
mouse.updateLeds();
};
this.updateLeds = function() {
$("hid-mouse-led").className = (__ws && __stream_hovered ? "led-on" : "led-off");
self.updateLeds();
};
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 __upload_http = 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() {
if (http.readyState === 4) {
if (http.status === 200) {
msd.setState(JSON.parse(http.responseText).result);
self.setState(JSON.parse(http.responseText).result);
} else {
setTimeout(msd.loadInitialState, 1000);
setTimeout(self.loadInitialState, 1000);
}
}
});
};
this.setState = function(state) {
self.setState = function(state) {
__state = state;
__applyState();
};
this.clickButton = function(el_button) {
if (el_button.id === "msd-upload-new-image-button") {
var __clickUploadNewImageButton = function() {
var form_data = new FormData();
form_data.append("image_name", __image_file.name);
form_data.append("image_data", __image_file);
@ -32,17 +50,18 @@ var msd = new function() {
__upload_http.onreadystatechange = __uploadStateChange;
__upload_http.upload.onprogress = __uploadProgress;
__upload_http.send(form_data);
};
} else if (el_button.id === "msd-abort-uploading-button") {
var __clickAbortUploadingButton = function() {
__upload_http.onreadystatechange = null;
__upload_http.upload.onprogress = null;
__upload_http.abort();
__upload_http = null;
$("msd-progress").setAttribute("data-label", "Aborted");
$("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 to = (el_button.id === "msd-switch-to-kvm-button" ? "kvm" : "server");
var __clickSwitchButton = function(to) {
var http = tools.makeRequest("POST", "/kvmd/msd/connect?to=" + to, function() {
if (http.readyState === 4) {
if (http.status !== 200) {
@ -52,11 +71,10 @@ var msd = new function() {
__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 image_file = (el_input.files.length ? el_input.files[0] : null);
if (image_file && image_file.size > __state.info.size) {
@ -72,21 +90,21 @@ var msd = new function() {
if (__state.connected_to === "server") {
$("msd-another-another-user-uploads").style.display = "none";
$("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";
} else if (__state.busy) {
if (!__upload_http) {
$("msd-another-another-user-uploads").style.display = "block";
}
$("msd-led").className = "led-msd-writing";
$("msd-status").innerHTML = "Uploading new image";
$("msd-status").innerHTML = $("msd-led").title = "Uploading new image";
} else {
$("msd-another-another-user-uploads").style.display = "none";
$("msd-led").className = "led-off";
if (__state.in_operate) {
$("msd-status").innerHTML = "Connected to KVM";
$("msd-status").innerHTML = $("msd-led").title = "Connected to KVM";
} 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 + "%";
}
};
};
__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 __ping_timer = null;
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() {
if (http.readyState === 4) {
if (http.status === 200) {
@ -13,13 +26,13 @@ var session = new function() {
$("about-version-python").innerHTML = version.python;
$("about-version-platform").innerHTML = version.platform;
} else {
setTimeout(session.loadKvmdVersion, 1000);
setTimeout(__loadKvmdVersion, 1000);
}
}
});
};
this.startPoller = function() {
var __startPoller = function() {
$("link-led").className = "led-link-connecting";
$("link-led").title = "Connecting...";
var http = tools.makeRequest("GET", "/wsauth", function() {
@ -56,8 +69,6 @@ var session = new function() {
} else if (event.msg_type === "event") {
if (event.msg.event === "atx_state") {
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") {
msd.setState(event.msg.event_attrs);
}
@ -85,7 +96,7 @@ var session = new function() {
__ws = null;
setTimeout(function() {
$("link-led").className = "led-link-connecting";
setTimeout(session.startPoller, 500);
setTimeout(__startPoller, 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 __normal_size = {width: 640, height: 480};
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() {
if (http.readyState === 2 || http.readyState === 4) {
var status = http.status;
@ -15,6 +31,7 @@ var stream = new function() {
$("stream-image").className = "stream-image-inactive";
$("stream-box").classList.add("stream-box-inactive");
$("stream-led").className = "led-off";
$("stream-led").title = "Stream inactive";
$("stream-reset-button").disabled = true;
} else if (!__prev_state) {
__refreshImage();
@ -22,14 +39,15 @@ var stream = new function() {
$("stream-image").className = "stream-image-active";
$("stream-box").classList.remove("stream-box-inactive");
$("stream-led").className = "led-on";
$("stream-led").title = "Stream is active";
$("stream-reset-button").disabled = false;
}
}
});
setTimeout(stream.startPoller, 2000);
setTimeout(__startPoller, 2000);
};
this.clickResetButton = function() {
var __clickResetButton = function() {
$("stream-reset-button").disabled = true;
var http = tools.makeRequest("POST", "/kvmd/streamer/reset", function() {
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 + "%";
__size_factor = percent / 100;
__applySizeFactor();
@ -58,8 +77,9 @@ var stream = new function() {
__normal_size = JSON.parse(http.responseText).result.size;
__applySizeFactor();
$("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 __windows = [];
var __ctl_items = [];
this.init = function() {
/********************************************************************************/
var __init__ = function() {
Array.prototype.forEach.call($$("ctl-item"), function(el_item) {
el_item.onclick = () => __toggleMenu(el_item);
__ctl_items.push(el_item);
});
Array.prototype.forEach.call($$("window"), function(el_window) {
var el_grab = el_window.querySelector(".window-header .window-grab");
__makeWindowMovable(el_grab, el_window);
__makeWindowMovable(el_window);
__windows.push(el_window);
var el_button = el_window.querySelector(".window-header .window-button-close");
@ -56,11 +56,16 @@ var ui = new function() {
window.onmouseup = __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")) {
var view = __getViewGeometry();
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_y = 0;
@ -180,7 +185,7 @@ var ui = new function() {
}
el_window.setAttribute("data-centered", "");
el_grab.onmousedown = startMoving;
el_window.querySelector(".window-header .window-grab").onmousedown = startMoving;
el_window.onclick = () => __raiseWindow(el_window);
};
@ -207,4 +212,6 @@ var ui = new function() {
tools.debug("Raised window:", el_window);
}
};
};
__init__();
}