HID Templates: first merge kbd and mouse
This commit is contained in:
		| @@ -6,76 +6,110 @@ | |||||||
|   <style> |   <style> | ||||||
|   </style> |   </style> | ||||||
|   <script src="https://code.jquery.com/jquery-3.5.0.js"></script> |   <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> | ||||||
|  |     function zapis(t) { | ||||||
|  |       $("div").text(t); | ||||||
|  |     } | ||||||
|  |      | ||||||
|  |     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); | ||||||
|  |      | ||||||
|  |         var ret = $.ajax({ | ||||||
|  |             type: "POST", | ||||||
|  |             url: "hid/keyboard", | ||||||
|  |             data: JSON.stringify(obj), | ||||||
|  |             contentType: "application/json; charset=utf-8", | ||||||
|  |             dataType: "json" | ||||||
|  |         }); | ||||||
|  |      | ||||||
|  |       console.log(ret); | ||||||
|  |       } | ||||||
|  |      | ||||||
|  |       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); | ||||||
|  |       zapis(text); | ||||||
|  |      | ||||||
|  |       previous = event.keyCode; | ||||||
|  |      | ||||||
|  |     }); | ||||||
|  |     var btn=0; | ||||||
|  |     var posX=0; | ||||||
|  |     var posY=0; | ||||||
|  |     var wheel=0; | ||||||
|  |      | ||||||
|  |     var socket = io(); | ||||||
|  |      | ||||||
|  |     $(document).ready(function(){ | ||||||
|  |      | ||||||
|  |       $("canvas").mousedown(function(event){ | ||||||
|  |         btn=event.buttons; | ||||||
|  |         handleMouse(); | ||||||
|  |       }); | ||||||
|  |       $("canvas").mouseup(function(event){ | ||||||
|  |         btn=event.buttons; | ||||||
|  |         handleMouse(); | ||||||
|  |       }); | ||||||
|  |       $("canvas").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, | ||||||
|  |       } | ||||||
|  |      | ||||||
|  |       socket.emit('mouseEvent', JSON.stringify(obj)); | ||||||
|  |     }; | ||||||
|  |     </script> | ||||||
| </head> | </head> | ||||||
| <body> | <body> | ||||||
| 	HID input service, POST data to /keyboard or /mouse <br/> |   HID Remote Keyboard and mouse<br/> | ||||||
| <div> |  | ||||||
| </div> |  | ||||||
|  |  | ||||||
| <br/> | <div></div> | ||||||
| Server response: <span></span> |  | ||||||
|  |  | ||||||
| <script> |  | ||||||
| function zapis(t) { |  | ||||||
|   $("div").text(t); |  | ||||||
| } |  | ||||||
|  |  | ||||||
| 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); |  | ||||||
|  |  | ||||||
|     var ret = $.ajax({ |  | ||||||
|         type: "POST", |  | ||||||
|         url: "hid/keyboard", |  | ||||||
|         data: JSON.stringify(obj), |  | ||||||
|         contentType: "application/json; charset=utf-8", |  | ||||||
|         dataType: "json" |  | ||||||
|     }); |  | ||||||
|  |  | ||||||
| 	$("span").text(ret.responseText); |  | ||||||
| 	console.log(ret); |  | ||||||
| 	 |  | ||||||
|  |  | ||||||
|   } |  | ||||||
|  |  | ||||||
|   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); |  | ||||||
|   zapis(text); |  | ||||||
|  |  | ||||||
|   previous = event.keyCode; |  | ||||||
|  |  | ||||||
| }); |  | ||||||
|  |  | ||||||
| </script> |  | ||||||
|   |   | ||||||
|  | <span></span><br/><br/> | ||||||
|  | <canvas width=1920 height=1080 style="border: 1px solid black" oncontextmenu="return false" onwheel='wheel=event.deltaY*-1; handleMouse(); wheel=0; return false;' ></canvas> | ||||||
| </body> | </body> | ||||||
| </html> | </html> | ||||||
|   | |||||||
| @@ -8,7 +8,7 @@ | |||||||
|   <script src="https://code.jquery.com/jquery-3.5.0.js"></script> |   <script src="https://code.jquery.com/jquery-3.5.0.js"></script> | ||||||
| </head> | </head> | ||||||
| <body> | <body> | ||||||
| 	HID input service, POST data to /keyboard or /mouse <br/> | 	HID input keyboard, POST data to /keyboard<br/> | ||||||
| <div> | <div> | ||||||
| </div> | </div> | ||||||
|  |  | ||||||
|   | |||||||
| @@ -36,8 +36,6 @@ $(document).ready(function(){ | |||||||
| 		posY=event.offsetY; | 		posY=event.offsetY; | ||||||
| 		handleMouse(); | 		handleMouse(); | ||||||
| 	}); | 	}); | ||||||
|  |  | ||||||
|  |  | ||||||
| }); | }); | ||||||
|  |  | ||||||
| function handleMouse() { | function handleMouse() { | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user