hippoz/capybara
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

improve design and add right click support

Browse source
This commit is contained in:
hippoz 2021-10-30 19:20:27 +03:00
parent c573e750eb
commit 7fb4e97f9e
No known key found for this signature in database
GPG key ID: 7C52899193467641
2 changed files with 94 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
capybara
View file

@ -69,6 +69,10 @@ class InputController():
self.parser.add_handler("u", {
"button": "int"
})
# Mouse button click
self.parser.add_handler("c", {
"button": "int"
})
def button_code_to_object(self, button_code: int):
# HACK
obj = None
@ -92,6 +96,9 @@ class InputController():
elif code == "u":
print("u", args["button"])
self.mouse_controller.release(self.button_code_to_object(args["button"]))
elif code == "c":
print("c", args["button"])
self.mouse_controller.click(self.button_code_to_object(args["button"]))
elif code == "s":
print("s", args["x"], args["y"])
self.mouse_controller.scroll(args["x"], args["y"])

111
public/index.html
View file

@ -6,8 +6,13 @@
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"> <title>Document</title>
<script>
"use strict";
const domlog = message => document.body.appendChild(document.createTextNode(message));
window.onerror = e => domlog(` ERROR - ${e} `);
const HOLDING_THRESHOLD_MS = 300;
const SINGLE_CLICK_BUTTON_UP_MS = 5;
const SCROLL_X_DAMPENING = 0.05;
const SCROLL_Y_DAMPENING = 0.06;
@ -59,11 +64,10 @@
}
class Connection {
constructor(url, logMessages=false) {
constructor(url) {
this.ws = null;
this.log = Logger(["Connection"], ["log"]).log;
this.messageLog = Logger(["Connection", "Message"], ["log"]).log;
this.logMessages = logMessages;
this.url = url;
}
@ -87,7 +91,6 @@
else
message += param + ";";
});
if (this.logMessages) this.messageLog(message);
this.ws.send(message);
return message;
@ -120,16 +123,29 @@
return buttonCode;
}
// takes a gesture name and a touch list
// adds the gesture name to the touch and returns false if that touch already had that gesture
_gesture(gestureName, touchList) {
for (let i = 0; i < touchList.length; i++) {
const touch = this.ongoingTouches[touchList[i].identifier];
if (touch.gestured.includes(gestureName)) return false;
touch.gestured.push(gestureName);
}
return true;
}
_sendRelativeMouseMovement(dx, dy) {
if (dx === 0 && dy === 0)
return;
return false;
this.connection.sendMessage("r", [dx, dy]);
return true;
}
_sendRelativeMouseScroll(dx, dy) {
if (dx === 0 && dy === 0)
return;
return false;
this.connection.sendMessage("s", [dx, dy]);
return true;
}
_sendMouseButtonDown(button="left") {
@ -141,11 +157,7 @@
}
_sendSingleClick(button="left") {
this._sendMouseButtonDown(button);
setTimeout(
() => this._sendMouseButtonUp(button),
SINGLE_CLICK_BUTTON_UP_MS
);
this.connection.sendMessage("c", [this.getButtonCode(button)]);
}
bindTo(element) {
@ -155,11 +167,10 @@
}
onTouchMove(event) {
const touches = event.touches;
const touches = event.changedTouches;
event.preventDefault();
for (let i = 0; i < touches.length; i++) {
this.ongoingTouches[touches[i].identifier].hasMoved = true;
}
event.stopPropagation();
const targetTouch = touches[0];
this.currentMoveX = targetTouch.pageX;
@ -178,28 +189,53 @@
this.lastMoveX = this.currentMoveX;
this.lastMoveY = this.currentMoveY;
// if two touches moved at the same time, assume scrolling intent
// if _sendRelativeMouseScroll or _sendRelativeMouseMovement return true, it means that the delta values are non-zero and a packet has been sent to the server
// in that case, the touches will be marked as moved
let shouldMarkTouchesAsMoved = false;
if (touches.length === 2) {
this._sendRelativeMouseScroll(deltaX * SCROLL_X_DAMPENING, deltaY * SCROLL_Y_DAMPENING);
if (
this._sendRelativeMouseScroll(deltaX * SCROLL_X_DAMPENING, deltaY * SCROLL_Y_DAMPENING)
) {
shouldMarkTouchesAsMoved = true;
}
} else if (touches.length === 3 && this._gesture("GESTURE_RIGHT_CLICK", touches)) {
shouldMarkTouchesAsMoved = true;
this._sendSingleClick("right");
} else {
this._sendRelativeMouseMovement(deltaX, deltaY);
if (
this._sendRelativeMouseMovement(deltaX, deltaY)
) {
shouldMarkTouchesAsMoved = true;
}
}
if (shouldMarkTouchesAsMoved) {
for (let i = 0; i < touches.length; i++) {
this.ongoingTouches[touches[i].identifier].hasMoved = true;
}
}
}
onTouchEnd(event) {
const changedTouches = event.changedTouches;
event.preventDefault();
event.stopPropagation();
this.shouldResetLastMove = true;
if (changedTouches.length === 1) {
// This is a single tap - left click
if (!this.ongoingTouches[changedTouches[0].identifier].hasMoved) {
this._sendSingleClick("left");
// We were in "holding mode" and now that touch event has ended,
// thus we have to stop holding the left click button
// We were in "holding mode" and now that touch event has ended,
// thus we have to stop holding the left click button
} else if (this.isInHoldingMode) {
this._sendMouseButtonUp("left");
this.isInHoldingMode = false;
}
}
// remove all ended touches
for (let i = 0; i < changedTouches.length; i++) {
const touch = changedTouches[i];
this.ongoingTouches[touch.identifier] = null;
@ -210,6 +246,7 @@
onTouchStart(event) {
const changedTouches = event.changedTouches;
event.preventDefault();
event.stopPropagation();
// Clear the hold mode time out if another touch begins
if (this.holdModeTimeout)
@ -234,13 +271,14 @@
identifier: touch.identifier,
clientX: touch.clientX,
clientY: touch.clientY,
hasMoved: false
hasMoved: false,
gestured: []
};
}
}
}
const connection = new Connection(`ws://${location.host}/gateway`, true);
const connection = new Connection(`ws://${location.host}/gateway`);
const controller = new TouchpadController(connection);
function main() {
connection.connect();
@ -249,10 +287,35 @@
</script>
<style>
:root {
--body-bg-color: #2e2e2e;
--accent-bg-color: #d4d3d3;
--accent-color: #949494;
--grayed-text-color: #949494;
--button-accent-color: #3d3d3d;
--selected-bg-color: #2e2e2e;
--hover-bg-color: #4d4d4d;
--card-border-radius: 1rem;
--button-border-radius: 0.5rem;
--main-font-weight: 500;
--fonts-regular: "Noto Sans", "Liberation Sans", sans-serif;
}
body {
font-weight: var(--main-font-weight);
font-family: var(--fonts-regular);
background-color: var(--body-bg-color);
color: var(--accent-bg-color);
margin: 0;
padding: 24px;
}
.touchpad {
width: 75vw;
height: 50vh;
background-color: blue;
height: 30rem;
width: 100%;
background-color: var(--accent-bg-color);
border-radius: var(--card-border-radius);
}
</style>
</head>