improved web

author: Devaev Maxim <[email protected]> 2018-07-11 23:23:19 +0000
committer: Devaev Maxim <[email protected]> 2018-07-11 23:32:34 +0000
commit: 498d8b1ecfdd0651d7808b85875a477a18bef380 (patch)
tree: 903cd4ce5241e5e1178595b4754053e3b8f19580 /kvmd/web
parent: 00097cbb98382cda2a902bae3e54cb8adc92f38e (diff)
3 files changed, 160 insertions, 59 deletions
diff --git a/kvmd/web/css/main.css b/kvmd/web/css/main.css
new file mode 100644
index 00000000..65169379
--- /dev/null
+++ b/kvmd/web/css/main.css
@@ -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 {
+}
diff --git a/kvmd/web/index.html b/kvmd/web/index.html
index 6fb3236e..609d5021 100644
--- a/kvmd/web/index.html
+++ b/kvmd/web/index.html
@@ -1,68 +1,28 @@
 <!DOCTYPE html>
 <html>
 <head>
-<meta charset="utf-8" />
-<title>&pi;-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>&pi;-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>&nbsp;&nbsp;</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>&nbsp;&nbsp;</td>
+		<td><div id="session-status">Not connected yet...</div></td>
+	</tr></table>
 </body>
 </html>
diff --git a/kvmd/web/js/kvmd.js b/kvmd/web/js/kvmd.js
new file mode 100644
index 00000000..9e72aebe
--- /dev/null
+++ b/kvmd/web/js/kvmd.js
@@ -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();
+}
author	Devaev Maxim <[email protected]>	2018-07-11 23:23:19 +0000
committer	Devaev Maxim <[email protected]>	2018-07-11 23:32:34 +0000
commit	498d8b1ecfdd0651d7808b85875a477a18bef380 (patch)
tree	903cd4ce5241e5e1178595b4754053e3b8f19580 /kvmd/web
parent	00097cbb98382cda2a902bae3e54cb8adc92f38e (diff)