1 files changed, 66 insertions, 0 deletions
diff --git a/kvmd/web/index.html b/kvmd/web/index.html
new file mode 100644
index 00000000..87281e88
--- /dev/null
+++ b/kvmd/web/index.html
@@ -0,0 +1,66 @@
+<!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>
+</head>
+
+<script>
+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 onKeyPress(event) {
+	console.log("key pressed: ", event);
+	let e = event || window.event || arguments.callee.caller.arguments[0];
+//	ws.Send("EVENT press " + e.keyCode);
+}
+
+function onKeyRelease(event) {
+	console.log("key released: ", event);
+	let e = event || window.event || arguments.callee.caller.arguments[0];
+//	ws.Send("EVENT press " + e.keyCode);
+}
+
+ws = new WebSocket("ws://" + location.host + "/kvmd/ws");
+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 = onKeyPress;
+document.onkeyup = onKeyRelease;
+</script>
+
+<body>
+<div class="screen">
+	<img src="/streamer/?action=stream" id="stream-image" class="screen-image" alt="" />
+</div>
+</body>
+</html>