From 6c1bd1235d9cd2ff24d73396b7e6673d9a566a50 Mon Sep 17 00:00:00 2001
From: Petr Kracik <petrkr@petrkr.net>
Date: Fri, 5 Jun 2020 17:05:48 +0200
Subject: [PATCH] Mouse template

---
 templates/mouse.html | 24 +++++++++---------------
 1 file changed, 9 insertions(+), 15 deletions(-)

diff --git a/templates/mouse.html b/templates/mouse.html
index 7a097f0..84552c9 100644
--- a/templates/mouse.html
+++ b/templates/mouse.html
@@ -12,18 +12,12 @@
 	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;
+var wheel=0;
 
 var socket = io();
 
@@ -37,18 +31,18 @@ $(document).ready(function(){
 		btn=event.buttons;
 		handleMouse();
 	});
+	$("canvas").mousemove(function(event){
+		posX=event.offsetX;
+		posY=event.offsetY;
+		handleMouse();
+	});
 
-	  $("canvas").mousemove(function(event){
-		  posX=event.offsetX;
-		  posY=event.offsetY;
-		  handleMouse();
-	  });
 
 });
 
 function handleMouse() {
 	$("span").text(btn +", "+ posX + ", " + posY);
-	sendMouse(btn, posX, posY);
+	sendMouse(btn, posX, posY, wheel);
 }
 
 function sendMouse(btn, x, y) {
@@ -56,7 +50,7 @@ function sendMouse(btn, x, y) {
     x: x,
     y: y,
     btn: btn,
-    wheel: 0,
+    wheel: wheel,
   }
 
   socket.emit('mouseEvent', JSON.stringify(obj));
@@ -64,7 +58,7 @@ function sendMouse(btn, x, y) {
 
 </script>
 <span></span><br/><br/>
-<canvas width=1920 height=1080 style="border: 1px solid black" oncontextmenu="return false"></canvas>
+<canvas width=1920 height=1080 style="border: 1px solid black" oncontextmenu="return false" onwheel='wheel=event.deltaY*-1; handleMouse(); wheel=0; return false;' ></canvas>
 <!--<img src="placeholder.png" width=1920 height=1080 onmousemove='console.log("aaa");' />-->
 </body>
 </html>