76 lines
1.7 KiB
HTML
76 lines
1.7 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Mouse remote</title>
|
|
<style>
|
|
</style>
|
|
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
|
|
</head>
|
|
<body>
|
|
HID mouse service, POST data to /mouse <br/>
|
|
<div>
|
|
</div>
|
|
|
|
<input type="button" onclick="sendMouse(0, 0, -10);" value="^" />
|
|
<input type="button" onclick="sendMouse(0, -10, 0);" value="<" />
|
|
<input type="button" onclick="sendMouse(0, 10, 0);" value=">" />
|
|
<input type="button" onclick="sendMouse(0, 0, 10);" value="v" /><br />
|
|
<input type="button" onclick="sendMouse(1, 0, 0);" value="LEFT" />
|
|
<input type="button" onclick="sendMouse(2, 0, 0);" value="RIGHT" />
|
|
<script>
|
|
|
|
var btn=0;
|
|
var posX=0;
|
|
var posY=0;
|
|
|
|
$(document).ready(function(){
|
|
|
|
$("canvas").mousedown(function(event){
|
|
btn=event.buttons;
|
|
handleMouse();
|
|
});
|
|
$("canvas").mouseup(function(event){
|
|
btn=event.buttons;
|
|
handleMouse();
|
|
});
|
|
|
|
$("canvas").mousemove(function(event){
|
|
// sendMouse(0, event.originalEvent.movementX, event.originalEvent.movementY);
|
|
posX=event.offsetX;
|
|
posY=event.offsetY;
|
|
handleMouse();
|
|
});
|
|
|
|
});
|
|
|
|
function handleMouse() {
|
|
$("span").text(btn +", "+ posX + ", " + posY);
|
|
sendMouse(btn, posX, posY);
|
|
}
|
|
|
|
function sendMouse(btn, x, y) {
|
|
var obj = {
|
|
x: x,
|
|
y: y,
|
|
btn: btn,
|
|
wheel: 0,
|
|
}
|
|
|
|
var ret = $.ajax({
|
|
type: "POST",
|
|
url: "hid/mouseabs",
|
|
data: JSON.stringify(obj),
|
|
contentType: "application/json; charset=utf-8",
|
|
dataType: "json"
|
|
});
|
|
|
|
};
|
|
|
|
</script>
|
|
<span></span><br/><br/>
|
|
<canvas width=500 height=500 style="border: 1px solid black" oncontextmenu="return false"></canvas>
|
|
<!--<img src="placeholder.png" width=1920 height=1080 onmousemove='console.log("aaa");' />-->
|
|
</body>
|
|
</html>
|