HID Input: KVM page (merge image with hid)

2020-06-07 13:38:06 +02:00
parent 50ab6c43fc
commit 19086199c0
2 changed files with 119 additions and 0 deletions
--- a/hidinput.py
+++ b/hidinput.py
@@ -87,6 +87,10 @@ def get_hid_by_jscode(rawkeycode):
 def index():
    return render_template("hid.html")

+@app.route("/kvm.html")
+def kvm():
+    return render_template("kvm.html")
+
@app.route("/mouse.html")
 def mouseindex():
    return render_template("mouse.html")
--- a/templates/kvm.html
+++ b/templates/kvm.html
@@ -0,0 +1,115 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Raspberry Pi KVM</title>
+  <style>
+  </style>
+  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js" integrity="sha256-yr4fRk/GU1ehYJPAs8P4JlTgu0Hdsp4ZKrx8bDEDC3I=" crossorigin="anonymous"></script>
+  <script>
+    function zapis(t) {
+      $("div").text(t);
+    }
+    
+    var previous;
+    
+    $(window).bind('keydown', function(event) {
+      event.preventDefault();
+      var str = String.fromCharCode(event.which).toLowerCase();
+    
+      var ctrl = event.ctrlKey;
+      if (previous == 17) {
+        ctrl = true;
+      }
+    
+      var obj = {
+        ctrlKey: ctrl,
+        shiftKey: event.shiftKey,
+        altKey: event.altKey,
+        which: event.which,
+      code: event.code,
+        str: str
+      }
+    
+      if (event.which != 16 && event.which != 17 && event.which != 18) {
+        console.log(obj);
+    
+        var ret = $.ajax({
+            type: "POST",
+            url: "hid/keyboard",
+            data: JSON.stringify(obj),
+            contentType: "application/json; charset=utf-8",
+            dataType: "json"
+        });
+    
+      console.log(ret);
+      }
+    
+      var text = "";
+      if (ctrl) {
+        text = text + ' + Control';
+      }
+      if (event.shiftKey) {
+        text = text + ' + Shift';
+      }
+      if (event.altKey) {
+        text = text + ' + Alt';
+      }
+      text = text + ' + ' + str;
+      text = text.substr(3);
+      zapis(text);
+    
+      previous = event.keyCode;
+    
+    });
+    var btn=0;
+    var posX=0;
+    var posY=0;
+    var wheel=0;
+    
+    var socket = io();
+    
+    $(document).ready(function(){
+    
+      $("img").mousedown(function(event){
+        btn=event.buttons;
+        handleMouse();
+      });
+      $("img").mouseup(function(event){
+        btn=event.buttons;
+        handleMouse();
+      });
+      $("img").mousemove(function(event){
+        posX=event.offsetX;
+        posY=event.offsetY;
+        handleMouse();
+      });
+    });
+    
+    function handleMouse() {
+      $("span").text(btn +", "+ posX + ", " + posY);
+      sendMouse(btn, posX, posY, wheel);
+    }
+    
+    function sendMouse(btn, x, y) {
+      var obj = {
+        x: x,
+        y: y,
+        btn: btn,
+        wheel: wheel,
+      }
+    
+      socket.emit('mouseEvent', JSON.stringify(obj));
+    };
+    </script>
+</head>
+<body>
+  KVM<br/>
+
+<div></div>
+ 
+<span></span><br/><br/>
+<img src="http://[2a01:510:d501:2800:1b8f:607e:9885:99c7]:8000/video_feed" draggable=false width=1920 height=1080 style="border: 1px solid black" oncontextmenu="return false" onwheel='wheel=event.deltaY*-1; handleMouse(); wheel=0; return false;' >
+</body>
+</html>