80 lines
2.0 KiB
HTML
80 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Pi Zero HID Web Controller</title>
|
|
<style>
|
|
body { font-family: sans-serif; background: #111; color: #eee; text-align: center; }
|
|
button { padding: 10px 20px; margin: 5px; font-size: 18px; }
|
|
#mousepad {
|
|
width: 400px; height: 300px;
|
|
background: #222; margin: 20px auto;
|
|
border: 2px solid #555; border-radius: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h1>Pi Zero HID Web Controller</h1>
|
|
|
|
<h2>Keyboard</h2>
|
|
<input id="keycode" type="number" placeholder="HID keycode">
|
|
<button onclick="sendKey()">Send Key</button>
|
|
|
|
<h2>Mouse</h2>
|
|
<div id="mousepad"></div>
|
|
|
|
<button onclick="mouseClick(1)">Left Click</button>
|
|
<button onclick="mouseClick(2)">Right Click</button>
|
|
<br>
|
|
<button onclick="scrollWheel(1)">Scroll Up</button>
|
|
<button onclick="scrollWheel(-1)">Scroll Down</button>
|
|
|
|
<script>
|
|
function sendKey() {
|
|
const code = document.getElementById("keycode").value;
|
|
fetch("/key", {
|
|
method: "POST",
|
|
headers: {"Content-Type": "application/x-www-form-urlencoded"},
|
|
body: "code=" + code
|
|
});
|
|
}
|
|
|
|
function mouseMove(dx, dy) {
|
|
fetch("/mouse", {
|
|
method: "POST",
|
|
headers: {"Content-Type": "application/x-www-form-urlencoded"},
|
|
body: `dx=${dx}&dy=${dy}&buttons=0&wheel=0`
|
|
});
|
|
}
|
|
|
|
function mouseClick(button) {
|
|
fetch("/mouse", {
|
|
method: "POST",
|
|
headers: {"Content-Type": "application/x-www-form-urlencoded"},
|
|
body: `dx=0&dy=0&buttons=${button}&wheel=0`
|
|
});
|
|
}
|
|
|
|
function scrollWheel(dir) {
|
|
fetch("/mouse", {
|
|
method: "POST",
|
|
headers: {"Content-Type": "application/x-www-form-urlencoded"},
|
|
body: `dx=0&dy=0&buttons=0&wheel=${dir}`
|
|
});
|
|
}
|
|
|
|
const pad = document.getElementById("mousepad");
|
|
let lastX = 0, lastY = 0;
|
|
|
|
pad.addEventListener("mousemove", e => {
|
|
if (e.buttons !== 1) return;
|
|
const dx = e.movementX;
|
|
const dy = e.movementY;
|
|
mouseMove(dx, dy);
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|