Working on mobile remote control.

This commit is contained in:
Jared Goodwin 2019-03-19 21:21:19 -07:00
parent ca744efaef
commit 411057b7ee
11 changed files with 181 additions and 107 deletions

View File

@ -182,13 +182,13 @@ namespace Remotely_ScreenCast.Sockets
Win32Interop.SendLeftMouseUp(point.X, point.Y);
}
});
hubConnection.On("Tap", (string viewerID) =>
hubConnection.On("Tap", (double percentX, double percentY, string viewerID) =>
{
if (Program.Viewers.TryGetValue(viewerID, out var viewer) && viewer.HasControl)
{
User32.GetCursorPos(out var point);
Win32Interop.SendLeftMouseDown(point.X, point.Y);
Win32Interop.SendLeftMouseUp(point.X, point.Y);
var mousePoint = ScreenCaster.GetAbsolutePercentFromRelativePercent(percentX, percentY, viewer.Capturer);
Win32Interop.SendLeftMouseDown((int)mousePoint.Item1, (int)mousePoint.Item2);
Win32Interop.SendLeftMouseUp((int)mousePoint.Item1, (int)mousePoint.Item2);
}
});
hubConnection.On("SharedFileIDs", (List<string> fileIDs) => {

View File

@ -9,7 +9,7 @@
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=0.9" />
<meta name="viewport" content="width=device-width, initial-scale=0.9" />
<link rel="icon" href="~/favicon.ico" />
<title>Remotely Remote Control</title>
<meta name="apple-mobile-web-app-capable" content="yes" />

View File

@ -188,9 +188,9 @@ namespace Remotely_Server.Services
await RCDeviceHub.Clients.Client(ScreenCasterID).SendAsync("SharedFileIDs", fileIDs);
}
public async Task Tap()
public async Task Tap(double percentX, double percentY)
{
await RCDeviceHub.Clients.Client(ScreenCasterID).SendAsync("Tap", Context.ConnectionId);
await RCDeviceHub.Clients.Client(ScreenCasterID).SendAsync("Tap", percentX, percentY, Context.ConnectionId);
}
public async Task TouchDown()

View File

@ -1 +1 @@
2019.03.19.0922
2019.03.19.2106

View File

@ -116,8 +116,6 @@ button[disabled] {
#screenViewer {
max-width: 99vw;
max-height: 99vh;
-ms-touch-action: pinch-zoom;
touch-action: pinch-zoom;
z-index: 1;
}

View File

@ -57,8 +57,8 @@ export class RCBrowserSockets {
SendTouchUp() {
this.Connection.invoke("TouchUp");
}
SendTap() {
this.Connection.invoke("Tap");
SendTap(percentX, percentY) {
this.Connection.invoke("Tap", percentX, percentY);
}
SendMouseWheel(deltaX, deltaY) {
this.Connection.invoke("MouseWheel", deltaX, deltaY);

File diff suppressed because one or more lines are too long

View File

@ -64,8 +64,8 @@ export class RCBrowserSockets {
SendTouchUp(): any {
this.Connection.invoke("TouchUp");
}
SendTap(): any {
this.Connection.invoke("Tap");
SendTap(percentX: number, percentY: number): any {
this.Connection.invoke("Tap", percentX, percentY);
}
SendMouseWheel(deltaX: number, deltaY: number): any {
this.Connection.invoke("MouseWheel", deltaX, deltaY);

View File

@ -1,4 +1,3 @@
import { GetDistanceBetween } from "../Utilities.js";
import { ConnectToClient, RemoteControl } from "./RemoteControl.js";
import { FloatMessage } from "../UI.js";
import { RemoteControlMode } from "../Enums/RemoteControlMode.js";
@ -23,7 +22,9 @@ var lastTouchPointY;
var lastTouchStart = Date.now();
var touchList = new Array();
var longPressTimeout;
var isDragging;
var lastTouchDistanceMoved = 0;
var currentPointerDevice;
export function ApplyInputHandlers(sockets) {
document.querySelector("#menuButton").addEventListener("click", (ev) => {
HorizontalBars.forEach(x => {
@ -115,6 +116,7 @@ export function ApplyInputHandlers(sockets) {
ConnectToClient();
});
ScreenViewer.addEventListener("mousemove", function (e) {
currentPointerDevice = "Touch";
e.preventDefault();
if (Date.now() - lastPointerMove < 25) {
return;
@ -125,6 +127,7 @@ export function ApplyInputHandlers(sockets) {
sockets.SendMouseMove(percentX, percentY);
});
ScreenViewer.addEventListener("mousedown", function (e) {
currentPointerDevice = "Mouse";
if (e.button != 0 && e.button != 2) {
return;
}
@ -134,6 +137,7 @@ export function ApplyInputHandlers(sockets) {
sockets.SendMouseDown(e.button, percentX, percentY);
});
ScreenViewer.addEventListener("mouseup", function (e) {
currentPointerDevice = "Mouse";
if (e.button != 0 && e.button != 2) {
return;
}
@ -143,70 +147,103 @@ export function ApplyInputHandlers(sockets) {
sockets.SendMouseUp(e.button, percentX, percentY);
});
ScreenViewer.addEventListener("click", function (e) {
e.preventDefault();
e.stopPropagation();
if (currentPointerDevice == "Mouse") {
e.preventDefault();
e.stopPropagation();
}
else if (currentPointerDevice == "Touch") {
var percentX = e.offsetX / ScreenViewer.clientWidth;
var percentY = e.offsetY / ScreenViewer.clientHeight;
sockets.SendTap(percentX, percentY);
}
});
//ScreenViewer.addEventListener("dblclick", function (e) {
// if (currentPointerDevice == "Mouse") {
// e.preventDefault();
// e.stopPropagation();
// }
// else if (currentPointerDevice == "Touch") {
// }
//});
ScreenViewer.addEventListener("contextmenu", (ev) => {
ev.preventDefault();
});
ScreenViewer.addEventListener("touchstart", function (e) {
currentPointerDevice = "Touch";
KeyboardButton.removeAttribute("hidden");
var focusedInput = document.querySelector("input:focus");
if (focusedInput) {
focusedInput.blur();
}
touchList.push(e.changedTouches[0].identifier);
if (e.touches.length > 1) {
window.clearTimeout(longPressTimeout);
return;
}
e.preventDefault();
e.stopPropagation();
if (Date.now() - lastTouchStart < 500) {
sockets.SendTouchDown();
return;
}
lastTouchStart = Date.now();
lastTouchPointX = e.touches[0].clientX;
lastTouchPointY = e.touches[0].clientY;
lastTouchDistanceMoved = 0;
longPressTimeout = window.setTimeout(() => {
if (lastTouchStart > lastPointerMove && touchList.some(x => x == e.changedTouches[0].identifier)) {
sockets.SendLongPress();
}
}, 1500);
//touchList.push(e.changedTouches[0].identifier);
//if (e.touches.length > 1) {
// window.clearTimeout(longPressTimeout);
// return;
//}
//e.preventDefault();
//e.stopPropagation();
//if (Date.now() - lastTouchStart < 500) {
// sockets.SendTouchDown();
// return;
//}
//lastTouchStart = Date.now();
//lastTouchPointX = e.touches[0].clientX;
//lastTouchPointY = e.touches[0].clientY;
//lastTouchDistanceMoved = 0;
//longPressTimeout = window.setTimeout(() => {
// if (lastTouchStart > lastPointerMove && touchList.some(x => x == e.changedTouches[0].identifier)) {
// sockets.SendLongPress();
// }
//}, 1500);
});
ScreenViewer.addEventListener("touchmove", function (e) {
if (e.touches.length > 1) {
currentPointerDevice = "Touch";
var percentX = (e.touches[0].pageX - ScreenViewer.getBoundingClientRect().left) / ScreenViewer.clientWidth;
var percentY = (e.touches[0].pageY - ScreenViewer.getBoundingClientRect().top) / ScreenViewer.clientHeight;
if (e.touches.length == 2) {
return;
}
e.preventDefault();
e.stopPropagation();
if (Date.now() - lastPointerMove < 50) {
return;
else if (e.touches.length > 2) {
sockets.SendMouseDown(2, percentX, percentY);
}
lastTouchDistanceMoved = GetDistanceBetween(lastTouchPointX, lastTouchPointY, e.touches[0].clientX, e.touches[0].clientY);
var moveX = (e.touches[0].clientX - lastTouchPointX) * 2;
var moveY = (e.touches[0].clientY - lastTouchPointY) * 2;
sockets.SendTouchMove(moveX, moveY);
lastTouchPointX = e.touches[0].clientX;
lastTouchPointY = e.touches[0].clientY;
lastPointerMove = Date.now();
else if (isDragging) {
sockets.SendMouseDown(0, percentX, percentY);
sockets.SendMouseMove(percentX, percentY);
}
//lastTouchDistanceMoved = GetDistanceBetween(lastTouchPointX, lastTouchPointY, e.touches[0].clientX, e.touches[0].clientY);
//var moveX = (e.touches[0].clientX - lastTouchPointX) * 2;
//var moveY = (e.touches[0].clientY - lastTouchPointY) * 2;
//sockets.SendTouchMove(moveX, moveY);
//lastTouchPointX = e.touches[0].clientX;
//lastTouchPointY = e.touches[0].clientY;
//lastPointerMove = Date.now();
});
ScreenViewer.addEventListener("touchend", function (e) {
var index = touchList.findIndex(x => x == e.changedTouches[0].identifier);
touchList.splice(index, 1);
e.preventDefault();
e.stopPropagation();
if (e.touches.length > 0) {
return;
}
if (Date.now() - lastTouchStart < 500 && lastTouchDistanceMoved < 5) {
sockets.SendTap();
currentPointerDevice = "Touch";
if (e.touches.length == 1) {
isDragging = true;
}
else {
sockets.SendTouchUp();
if (isDragging) {
var percentX = (e.changedTouches[0].pageX - ScreenViewer.getBoundingClientRect().left) / ScreenViewer.clientWidth;
var percentY = (e.changedTouches[0].pageY - ScreenViewer.getBoundingClientRect().top) / ScreenViewer.clientHeight;
sockets.SendMouseUp(0, percentX, percentY);
}
isDragging = false;
}
//var index = touchList.findIndex(x => x == e.changedTouches[0].identifier);
//touchList.splice(index, 1);
//e.preventDefault();
//e.stopPropagation();
//if (e.touches.length > 0) {
// return;
//}
//if (Date.now() - lastTouchStart < 500 && lastTouchDistanceMoved < 5) {
// sockets.SendTap();
//}
//else {
// sockets.SendTouchUp();
//}
});
ScreenViewer.addEventListener("wheel", function (e) {
e.preventDefault();

File diff suppressed because one or more lines are too long

View File

@ -26,7 +26,9 @@ var lastTouchPointY: number;
var lastTouchStart = Date.now();
var touchList = new Array<number>();
var longPressTimeout: number;
var isDragging: boolean;
var lastTouchDistanceMoved = 0;
var currentPointerDevice: "Mouse" | "Touch";
export function ApplyInputHandlers(sockets: RCBrowserSockets) {
document.querySelector("#menuButton").addEventListener("click", (ev) => {
@ -121,6 +123,7 @@ export function ApplyInputHandlers(sockets: RCBrowserSockets) {
ConnectToClient();
});
ScreenViewer.addEventListener("mousemove", function (e) {
currentPointerDevice = "Touch";
e.preventDefault();
if (Date.now() - lastPointerMove < 25) {
return;
@ -131,6 +134,7 @@ export function ApplyInputHandlers(sockets: RCBrowserSockets) {
sockets.SendMouseMove(percentX, percentY);
});
ScreenViewer.addEventListener("mousedown", function (e) {
currentPointerDevice = "Mouse";
if (e.button != 0 && e.button != 2) {
return;
}
@ -140,6 +144,7 @@ export function ApplyInputHandlers(sockets: RCBrowserSockets) {
sockets.SendMouseDown(e.button, percentX, percentY);
});
ScreenViewer.addEventListener("mouseup", function (e) {
currentPointerDevice = "Mouse";
if (e.button != 0 && e.button != 2) {
return;
}
@ -148,78 +153,112 @@ export function ApplyInputHandlers(sockets: RCBrowserSockets) {
var percentY = e.offsetY / ScreenViewer.clientHeight;
sockets.SendMouseUp(e.button, percentX, percentY);
});
ScreenViewer.addEventListener("click", function (e) {
e.preventDefault();
e.stopPropagation();
if (currentPointerDevice == "Mouse") {
e.preventDefault();
e.stopPropagation();
}
else if (currentPointerDevice == "Touch") {
var percentX = e.offsetX / ScreenViewer.clientWidth;
var percentY = e.offsetY / ScreenViewer.clientHeight;
sockets.SendTap(percentX, percentY);
}
});
//ScreenViewer.addEventListener("dblclick", function (e) {
// if (currentPointerDevice == "Mouse") {
// e.preventDefault();
// e.stopPropagation();
// }
// else if (currentPointerDevice == "Touch") {
// }
//});
ScreenViewer.addEventListener("contextmenu", (ev) => {
ev.preventDefault();
});
ScreenViewer.addEventListener("touchstart", function (e) {
currentPointerDevice = "Touch";
KeyboardButton.removeAttribute("hidden");
var focusedInput = document.querySelector("input:focus") as HTMLInputElement;
if (focusedInput) {
focusedInput.blur();
}
touchList.push(e.changedTouches[0].identifier);
//touchList.push(e.changedTouches[0].identifier);
if (e.touches.length > 1) {
window.clearTimeout(longPressTimeout);
return;
}
//if (e.touches.length > 1) {
// window.clearTimeout(longPressTimeout);
// return;
//}
e.preventDefault();
e.stopPropagation();
if (Date.now() - lastTouchStart < 500) {
sockets.SendTouchDown();
return;
}
lastTouchStart = Date.now();
lastTouchPointX = e.touches[0].clientX;
lastTouchPointY = e.touches[0].clientY;
lastTouchDistanceMoved = 0;
longPressTimeout = window.setTimeout(() => {
if (lastTouchStart > lastPointerMove && touchList.some(x => x == e.changedTouches[0].identifier)) {
sockets.SendLongPress();
}
}, 1500);
//e.preventDefault();
//e.stopPropagation();
//if (Date.now() - lastTouchStart < 500) {
// sockets.SendTouchDown();
// return;
//}
//lastTouchStart = Date.now();
//lastTouchPointX = e.touches[0].clientX;
//lastTouchPointY = e.touches[0].clientY;
//lastTouchDistanceMoved = 0;
//longPressTimeout = window.setTimeout(() => {
// if (lastTouchStart > lastPointerMove && touchList.some(x => x == e.changedTouches[0].identifier)) {
// sockets.SendLongPress();
// }
//}, 1500);
});
ScreenViewer.addEventListener("touchmove", function (e) {
if (e.touches.length > 1) {
currentPointerDevice = "Touch";
var percentX = (e.touches[0].pageX - ScreenViewer.getBoundingClientRect().left) / ScreenViewer.clientWidth;
var percentY = (e.touches[0].pageY - ScreenViewer.getBoundingClientRect().top) / ScreenViewer.clientHeight;
if (e.touches.length == 2) {
return;
}
e.preventDefault();
e.stopPropagation();
if (Date.now() - lastPointerMove < 50) {
return;
else if (e.touches.length > 2) {
sockets.SendMouseDown(2, percentX, percentY);
}
else if (isDragging) {
sockets.SendMouseDown(0, percentX, percentY);
sockets.SendMouseMove(percentX, percentY);
}
lastTouchDistanceMoved = GetDistanceBetween(lastTouchPointX, lastTouchPointY, e.touches[0].clientX, e.touches[0].clientY);
//lastTouchDistanceMoved = GetDistanceBetween(lastTouchPointX, lastTouchPointY, e.touches[0].clientX, e.touches[0].clientY);
var moveX = (e.touches[0].clientX - lastTouchPointX) * 2;
var moveY = (e.touches[0].clientY - lastTouchPointY) * 2;
sockets.SendTouchMove(moveX, moveY);
lastTouchPointX = e.touches[0].clientX;
lastTouchPointY = e.touches[0].clientY;
lastPointerMove = Date.now();
//var moveX = (e.touches[0].clientX - lastTouchPointX) * 2;
//var moveY = (e.touches[0].clientY - lastTouchPointY) * 2;
//sockets.SendTouchMove(moveX, moveY);
//lastTouchPointX = e.touches[0].clientX;
//lastTouchPointY = e.touches[0].clientY;
//lastPointerMove = Date.now();
});
ScreenViewer.addEventListener("touchend", function (e) {
var index = touchList.findIndex(x => x == e.changedTouches[0].identifier);
touchList.splice(index, 1);
e.preventDefault();
e.stopPropagation();
if (e.touches.length > 0) {
return;
}
if (Date.now() - lastTouchStart < 500 && lastTouchDistanceMoved < 5) {
sockets.SendTap();
currentPointerDevice = "Touch";
if (e.touches.length == 1) {
isDragging = true;
}
else {
sockets.SendTouchUp();
if (isDragging) {
var percentX = (e.changedTouches[0].pageX - ScreenViewer.getBoundingClientRect().left) / ScreenViewer.clientWidth;
var percentY = (e.changedTouches[0].pageY - ScreenViewer.getBoundingClientRect().top) / ScreenViewer.clientHeight;
sockets.SendMouseUp(0, percentX, percentY);
}
isDragging = false;
}
//var index = touchList.findIndex(x => x == e.changedTouches[0].identifier);
//touchList.splice(index, 1);
//e.preventDefault();
//e.stopPropagation();
//if (e.touches.length > 0) {
// return;
//}
//if (Date.now() - lastTouchStart < 500 && lastTouchDistanceMoved < 5) {
// sockets.SendTap();
//}
//else {
// sockets.SendTouchUp();
//}
});
ScreenViewer.addEventListener("wheel", function (e) {