mirror of
https://github.com/mofeng-git/One-KVM.git
synced 2025-12-13 01:30:31 +08:00
improved web
This commit is contained in:
Devaev Maxim
parent
00097cbb98
commit
498d8b1ecf
41
kvmd/web/css/main.css
Normal file
41
kvmd/web/css/main.css
Normal file
@ -0,0 +1,41 @@
|
||||
.stream-box {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
background-color: #e5e5f5;
|
||||
padding: 1em;
|
||||
text-align: left;
|
||||
}
|
||||
.stream-box .stream-image {
|
||||
width: 720px;
|
||||
height: 576px;
|
||||
border: 1px solid grey;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.session-opened {
|
||||
}
|
||||
.session-closed {
|
||||
color: #ff3d40;
|
||||
}
|
||||
|
||||
div#power-led, div#hdd-led {
|
||||
border-radius: 50%;
|
||||
border: 1px solid grey;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
div.power-led-on {
|
||||
background: #00ce00;
|
||||
}
|
||||
div.power-led-off {
|
||||
background: #adceab;
|
||||
}
|
||||
div.hdd-led-on {
|
||||
background: #ff373a;
|
||||
}
|
||||
div.hdd-led-off {
|
||||
background: #ffcdce;
|
||||
}
|
||||
|
||||
button#power-button, button#reset-button {
|
||||
}
|
||||
@ -1,68 +1,28 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>π-kvm</title>
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
.screen, .screen * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.screen {
|
||||
display: inline-block;
|
||||
background-color: #e5e5f5;
|
||||
font-family: Arial, Tahoma, Verdana, sans;
|
||||
font-size: 10pt;
|
||||
text-align: center;
|
||||
padding: 1em;
|
||||
text-align: left;
|
||||
}
|
||||
.screen .screen-image {
|
||||
width: 720px;
|
||||
height: 576px;
|
||||
border: 1px solid #77d;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
<meta charset="utf-8" />
|
||||
<title>π-kvm</title>
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
</head>
|
||||
|
||||
<script>
|
||||
ws = new WebSocket("ws://" + location.host + "/kvmd/ws");
|
||||
|
||||
function onWsMessage(message) {
|
||||
console.log(message.data);
|
||||
/*if (message.data == "EVENT mjpg_streamer started") {
|
||||
document.getElementById("stream-image").src = "/streamer/?action=stream&time=" + new Date().getTime();
|
||||
}*/
|
||||
}
|
||||
|
||||
function onKeyEvent(event, state) {
|
||||
// TODO: run this code under the lock
|
||||
if (!event.metaKey) { // https://github.com/wesbos/keycodes/blob/gh-pages/scripts.js
|
||||
event.preventDefault();
|
||||
}
|
||||
console.log("Key", (state ? "pressed:" : "released:"), event)
|
||||
ws.send(JSON.stringify({
|
||||
event_type: "key",
|
||||
key: event.code,
|
||||
state: state,
|
||||
}));
|
||||
}
|
||||
|
||||
ws.onmessage = (message) => onWsMessage(message);
|
||||
ws.onerror = (error) => console.error(error);
|
||||
ws.onclose = () => console.log("closed");
|
||||
|
||||
// https://www.codeday.top/2017/05/03/24906.html
|
||||
document.onkeydown = (event) => onKeyEvent(event, true);
|
||||
document.onkeyup = (event) => onKeyEvent(event, false);
|
||||
</script>
|
||||
<script src="js/kvmd.js"></script>
|
||||
<script> window.onload = runKvmdSession; </script>
|
||||
|
||||
<body>
|
||||
<div class="screen">
|
||||
<img src="/streamer/?action=stream" id="stream-image" class="screen-image" alt="" />
|
||||
</div>
|
||||
<div class="stream-box">
|
||||
<img src="/streamer/?action=stream" id="stream-image" class="stream-image" alt="" />
|
||||
</div>
|
||||
|
||||
<table><tr>
|
||||
<td><div id="power-led" class="power-led-off"></div></td>
|
||||
<td><div id="hdd-led" class="hdd-led-off"></div></td>
|
||||
<td> </td>
|
||||
<td><button id="power-button" type="button" title="Click hardware power button" onclick="clickPowerButton();">Power</button></td>
|
||||
<td><button id="power-button-long" type="button" title="Click hardware power button (long press)" onclick="clickPowerButtonLong();">Power (long)</button></td>
|
||||
<td><button id="reset-button" type="button" title="Click to force reset" onclick="clickResetButton();">Reset</button></td>
|
||||
<td> </td>
|
||||
<td><div id="session-status">Not connected yet...</div></td>
|
||||
</tr></table>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
100
kvmd/web/js/kvmd.js
Normal file
100
kvmd/web/js/kvmd.js
Normal file
@ -0,0 +1,100 @@
|
||||
KVMD_BASE_URL = "/kvmd"
|
||||
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
function runKvmdSession() {
|
||||
var ws = new WebSocket("ws://" + location.host + KVMD_BASE_URL + "/ws");
|
||||
|
||||
ws.onopen = function(event) {
|
||||
alert("Session opened and keyboard will be captured");
|
||||
__installHidHandlers(ws);
|
||||
__setSessionStatus("session-opened", "Session opened (keyboard captured)");
|
||||
};
|
||||
|
||||
ws.onmessage = function(event) {
|
||||
// console.log("KVMD:", event.data);
|
||||
event = JSON.parse(event.data);
|
||||
if (event.msg_type == "event") {
|
||||
if (event.msg.event == "atx_state") {
|
||||
document.getElementById("power-led").className = "power-led-" + (event.msg.event_attrs.leds.power ? "on" : "off");
|
||||
document.getElementById("hdd-led").className = "hdd-led-" + (event.msg.event_attrs.leds.hdd ? "on" : "off");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
ws.onclose = function(event) {
|
||||
__clearHidHandlers();
|
||||
__setSessionStatus("session-closed", "Session closed (keyboard free), trying to reconnect...");
|
||||
document.getElementById("power-led").className = "power-led-off";
|
||||
document.getElementById("hdd-led").className = "hdd-led-off";
|
||||
setTimeout(runKvmdSession, 5000);
|
||||
};
|
||||
|
||||
ws.onerror = function(error) {
|
||||
ws.close();
|
||||
};
|
||||
}
|
||||
|
||||
function __setSessionStatus(cls, msg) {
|
||||
var el_session_status = document.getElementById("session-status");
|
||||
el_session_status.innerHTML = msg;
|
||||
el_session_status.className = cls;
|
||||
}
|
||||
|
||||
function __installHidHandlers(ws) {
|
||||
// https://www.codeday.top/2017/05/03/24906.html
|
||||
document.onkeydown = (event) => __onKeyEvent(ws, event, true);
|
||||
document.onkeyup = (event) => __onKeyEvent(ws, event, false);
|
||||
}
|
||||
|
||||
function __clearHidHandlers() {
|
||||
document.onkeydown = null;
|
||||
document.onkeyup = null;
|
||||
}
|
||||
|
||||
function __onKeyEvent(ws, event, state) {
|
||||
if (!event.metaKey) { // https://github.com/wesbos/keycodes/blob/gh-pages/scripts.js
|
||||
event.preventDefault();
|
||||
}
|
||||
// console.log("KVMD: Key", (state ? "pressed:" : "released:"), event)
|
||||
ws.send(JSON.stringify({
|
||||
event_type: "key",
|
||||
key: event.code,
|
||||
state: state,
|
||||
}));
|
||||
}
|
||||
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
function clickPowerButton() {
|
||||
if (confirm("Are you sure to click the power button?")) {
|
||||
__clickButton("power");
|
||||
}
|
||||
}
|
||||
|
||||
function clickPowerButtonLong() {
|
||||
if (confirm("Are you sure to perform the long press of the power button?")) {
|
||||
__clickButton("power_long");
|
||||
}
|
||||
}
|
||||
|
||||
function clickResetButton() {
|
||||
if (confirm("Are you sure to reboot the server?")) {
|
||||
__clickButton("reset");
|
||||
}
|
||||
}
|
||||
|
||||
function __clickButton(button) {
|
||||
var http = new XMLHttpRequest();
|
||||
http.open("POST", KVMD_BASE_URL + "/atx/click?button=" + button, true);
|
||||
http.onreadystatechange = function() {
|
||||
if (http.readyState == 4) {
|
||||
if (http.status == 200) {
|
||||
alert("Clicked!")
|
||||
} else {
|
||||
alert("Click error: " + http.responseText);
|
||||
}
|
||||
}
|
||||
}
|
||||
http.send();
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user