diff options
author | Devaev Maxim <[email protected]> | 2018-09-26 02:57:24 +0300 |
---|---|---|
committer | Devaev Maxim <[email protected]> | 2018-09-26 02:57:24 +0300 |
commit | 81a5311349564a1016c4af2bf18ae872b650e85b (patch) | |
tree | d01fd027948494e22ae2c14334b98c1515e5e8a4 /web/js/mouse.js | |
parent | f3946f102fc167efdc53c73412b2c0d6ac6c72c5 (diff) |
moved kvmd to the root
Diffstat (limited to 'web/js/mouse.js')
-rw-r--r-- | web/js/mouse.js | 146 |
1 files changed, 146 insertions, 0 deletions
diff --git a/web/js/mouse.js b/web/js/mouse.js new file mode 100644 index 00000000..e4038436 --- /dev/null +++ b/web/js/mouse.js @@ -0,0 +1,146 @@ +function Mouse() { + var self = this; + + /********************************************************************************/ + + var __ws = null; + + var __current_pos = {x: 0, y:0}; + var __sent_pos = {x: 0, y:0}; + + var __stream_hovered = false; + + var __init__ = function() { + $("hid-mouse-led").title = "Mouse free"; + + $("stream-box").onmouseenter = __hoverStream; + $("stream-box").onmouseleave = __leaveStream; + $("stream-box").onmousedown = (event) => __buttonHandler(event, true); + $("stream-box").onmouseup = (event) => __buttonHandler(event, false); + $("stream-box").oncontextmenu = (event) => event.preventDefault(); + $("stream-box").onmousemove = __moveHandler; + $("stream-box").onwheel = __wheelHandler; + + $("stream-box").ontouchstart = (event) => __touchMoveHandler(event); + Array.prototype.forEach.call(document.querySelectorAll("[data-mouse-button]"), function(el_button) { + var button = el_button.getAttribute("data-mouse-button"); + tools.setOnDown(el_button, () => __sendButton(button, true)); + tools.setOnUp(el_button, () => __sendButton(button, false)); + }); + + setInterval(__sendMove, 100); + }; + + /********************************************************************************/ + + self.setSocket = function(ws) { + __ws = ws; + if (ws) { + $("stream-box").classList.add("stream-box-mouse-enabled"); + } else { + $("stream-box").classList.remove("stream-box-mouse-enabled"); + } + }; + + var __hoverStream = function() { + __stream_hovered = true; + __updateLeds(); + }; + + var __leaveStream = function() { + __stream_hovered = false; + __updateLeds(); + }; + + var __updateLeds = function() { + if (__ws && __stream_hovered) { + $("hid-mouse-led").className = "led-on"; + $("hid-mouse-led").title = "Mouse tracked"; + } else { + $("hid-mouse-led").className = "led-off"; + $("hid-mouse-led").title = "Mouse free"; + } + }; + + var __buttonHandler = function(event, state) { + // https://www.w3schools.com/jsref/event_button.asp + event.preventDefault(); + switch (event.button) { + case 0: __sendButton("left", state); break; + case 2: __sendButton("right", state); break; + } + }; + + var __touchMoveHandler = function(event) { + event.preventDefault(); + if (event.touches[0].target && event.touches[0].target.getBoundingClientRect) { + var rect = event.touches[0].target.getBoundingClientRect(); + __current_pos = { + x: Math.round(event.touches[0].clientX - rect.left), + y: Math.round(event.touches[0].clientY - rect.top), + }; + __sendMove(); + } + }; + + var __moveHandler = function(event) { + var rect = event.target.getBoundingClientRect(); + __current_pos = { + x: Math.round(event.clientX - rect.left), + y: Math.round(event.clientY - rect.top), + }; + }; + + + var __sendButton = function(button, state) { + tools.debug("Mouse button", (state ? "pressed:" : "released:"), button); + __sendMove(); + if (__ws) { + __ws.send(JSON.stringify({ + event_type: "mouse_button", + button: button, + state: state, + })); + } + }; + + var __sendMove = function() { + var pos = __current_pos; + if (pos.x !== __sent_pos.x || pos.y !== __sent_pos.y) { + var el_stream_image = $("stream-image"); + var to = { + x: __translate(pos.x, 0, el_stream_image.clientWidth, -32768, 32767), + y: __translate(pos.y, 0, el_stream_image.clientHeight, -32768, 32767), + }; + tools.debug("Mouse move:", to); + if (__ws) { + __ws.send(JSON.stringify({ + event_type: "mouse_move", + to: to, + })); + } + __sent_pos = pos; + } + }; + + var __translate = function(x, a, b, c, d) { + return Math.round((x - a) / (b - a) * (d - c) + c); + }; + + var __wheelHandler = function(event) { + // https://learn.javascript.ru/mousewheel + if (event.preventDefault) { + event.preventDefault(); + } + var delta = {x: event.deltaX, y: event.deltaY}; + tools.debug("Mouse wheel:", delta); + if (__ws) { + __ws.send(JSON.stringify({ + event_type: "mouse_wheel", + delta: delta, + })); + } + }; + + __init__(); +} |