Update templates/index.html

templates/index.html

@@ -23,8 +23,12 @@
 
 <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() {
@@ -40,7 +44,7 @@ function mouseMove(dx, dy) {
     fetch("/mouse", {
         method: "POST",
         headers: {"Content-Type": "application/x-www-form-urlencoded"},
-        body: `dx=${dx}&dy=${dy}&buttons=0`
+        body: `dx=${dx}&dy=${dy}&buttons=0&wheel=0`
     });
 }
 
@@ -48,7 +52,15 @@ function mouseClick(button) {
     fetch("/mouse", {
         method: "POST",
         headers: {"Content-Type": "application/x-www-form-urlencoded"},
-        body: `dx=0&dy=0&buttons=${button}`
+        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}`
     });
 }
 
@@ -57,18 +69,10 @@ let lastX = 0, lastY = 0;
 
 pad.addEventListener("mousemove", e => {
     if (e.buttons !== 1) return;
-    const rect = pad.getBoundingClientRect();
-    const dx = e.clientX - lastX;
-    const dy = e.clientY - lastY;
-    lastX = e.clientX;
-    lastY = e.clientY;
+    const dx = e.movementX;
+    const dy = e.movementY;
     mouseMove(dx, dy);
 });
-
-pad.addEventListener("mousedown", e => {
-    lastX = e.clientX;
-    lastY = e.clientY;
-});
 </script>
 
 </body>