2020-06-07 13:38:06 +02:00
|
|
|
<!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>
|
2020-06-07 14:24:15 +02:00
|
|
|
|
|
|
|
|
var socket = io();
|
|
|
|
|
|
2020-06-07 13:38:06 +02:00
|
|
|
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);
|
2020-06-07 14:24:15 +02:00
|
|
|
socket.emit('kbdEvent', JSON.stringify(obj));
|
2020-06-07 13:38:06 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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);
|
2020-06-07 14:28:27 +02:00
|
|
|
|
2020-06-07 13:38:06 +02:00
|
|
|
previous = event.keyCode;
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
var btn=0;
|
|
|
|
|
var posX=0;
|
|
|
|
|
var posY=0;
|
|
|
|
|
var wheel=0;
|
2020-06-07 14:24:15 +02:00
|
|
|
|
2020-06-07 13:38:06 +02:00
|
|
|
$(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,
|
|
|
|
|
}
|
2020-06-07 14:54:55 +02:00
|
|
|
|
|
|
|
|
var data = new Array(6);
|
|
|
|
|
data[0] = btn;
|
|
|
|
|
data[1] = x & 255;
|
|
|
|
|
data[2] = x >> 8
|
|
|
|
|
data[3] = y & 255;
|
|
|
|
|
data[4] = y >> 8
|
|
|
|
|
data[5] = 0;
|
|
|
|
|
|
2020-06-07 13:38:06 +02:00
|
|
|
|
|
|
|
|
socket.emit('mouseEvent', JSON.stringify(obj));
|
2020-06-07 14:54:55 +02:00
|
|
|
socket.emit('mouseEventRaw', data);
|
2020-06-07 13:38:06 +02:00
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2020-06-07 14:25:04 +02:00
|
|
|
KVM<br/>
|
2020-06-07 13:38:06 +02:00
|
|
|
|
|
|
|
|
<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>
|
