petrkr/rpikvm
1
0
Fork 0
Code Issues Pull Requests Releases Activity

HID Input: KVM page (merge image with hid)

Browse Source
This commit is contained in:
Petr Kracik 2020-06-07 13:38:06 +02:00
parent 50ab6c43fc
commit 19086199c0
2 changed files with 119 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
hidinput.py
View File

@ -87,6 +87,10 @@ def get_hid_by_jscode(rawkeycode):
def index(): def index():
return render_template("hid.html") return render_template("hid.html")
@app.route("/kvm.html")
def kvm():
return render_template("kvm.html")
@app.route("/mouse.html") @app.route("/mouse.html")
def mouseindex(): def mouseindex():
return render_template("mouse.html") return render_template("mouse.html")

115
templates/kvm.html Normal file
View File

@ -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>