lukajankovic/remote-touchpad
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

format source

Browse source
This commit is contained in:
Unrud 2018-09-07 09:29:09 +02:00
parent b96247c181
commit cc231211b5
4 changed files with 100 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

10
bindata.generated.go
View file

File diff suppressed because one or more lines are too long

81
webdata/fn.js
View file

@ -16,12 +16,16 @@
* You should have received a copy of the GNU General Public License * You should have received a copy of the GNU General Public License
* along with Foobar. If not, see <http://www.gnu.org/licenses/>. * along with Foobar. If not, see <http://www.gnu.org/licenses/>.
*/ */
// [1 Touch, 2 Touches, 3 Touches]
// [1 Touch, 2 Touches, 3 Touches]
const TOUCH_MOVE_THRESHOLD = [10, 15, 15]; const TOUCH_MOVE_THRESHOLD = [10, 15, 15];
const TOUCH_TIMEOUT = 250; const TOUCH_TIMEOUT = 250;
// [[px/s, mult], ...] // [[px/s, mult], ...]
const POINTER_ACCELERATION = [[0, 0], [87, 1], [173, 1], [553, 2]]; const POINTER_ACCELERATION = [
[0, 0],
[87, 1],
[173, 1],
[553, 2]
];
var ws; var ws;
var pad; var pad;
@ -124,12 +128,12 @@ function calculatePointerAccelerationMult(speed) {
if (i == 0) { if (i == 0) {
return a2; return a2;
} }
s1 = POINTER_ACCELERATION[i-1][0]; s1 = POINTER_ACCELERATION[i - 1][0];
a1 = POINTER_ACCELERATION[i-1][1]; a1 = POINTER_ACCELERATION[i - 1][1];
return ((speed-s1) / (s2-s1)) * (a2-a1) + a1; return ((speed - s1) / (s2 - s1)) * (a2 - a1) + a1;
} }
if (POINTER_ACCELERATION.length > 0) { if (POINTER_ACCELERATION.length > 0) {
return POINTER_ACCELERATION[POINTER_ACCELERATION.length-1][1]; return POINTER_ACCELERATION[POINTER_ACCELERATION.length - 1][1];
} }
return 1; return 1;
} }
@ -209,17 +213,17 @@ function handleEnd(evt) {
touchMoved = true; touchMoved = true;
} }
if (ongoingTouches.length == 0 && touchReleasedCount >= 1 && if (ongoingTouches.length == 0 && touchReleasedCount >= 1 &&
dragging) { dragging) {
ws.send("b1;0"); ws.send("b1;0");
} }
if (ongoingTouches.length == 0 && touchReleasedCount >= 1 && if (ongoingTouches.length == 0 && touchReleasedCount >= 1 &&
!touchMoved && evt.timeStamp - touchStart < TOUCH_TIMEOUT) { !touchMoved && evt.timeStamp - touchStart < TOUCH_TIMEOUT) {
var button = 0; var button = 0;
if (touchReleasedCount == 1) { if (touchReleasedCount == 1) {
button = 1; button = 1;
} else if (touchReleasedCount == 2) { } else if (touchReleasedCount == 2) {
button = 3; button = 3;
}else if (touchReleasedCount == 3) { } else if (touchReleasedCount == 3) {
button = 2; button = 2;
} }
ws.send("b" + button + ";1"); ws.send("b" + button + ";1");
@ -259,8 +263,11 @@ function handleMove(evt) {
continue; continue;
} }
if (!touchMoved) { if (!touchMoved) {
var dist = Math.sqrt(Math.pow(touches[i].pageX - ongoingTouches[idx].pageXStart, 2) + Math.pow(touches[i].pageY - ongoingTouches[idx].pageYStart, 2)); var dist = Math.sqrt(Math.pow(touches[i].pageX - ongoingTouches[idx].pageXStart, 2) +
if (ongoingTouches.length > TOUCH_MOVE_THRESHOLD.length || dist > TOUCH_MOVE_THRESHOLD[ongoingTouches.length - 1] || evt.timeStamp - touchStart >= TOUCH_TIMEOUT) { Math.pow(touches[i].pageY - ongoingTouches[idx].pageYStart, 2));
if (ongoingTouches.length > TOUCH_MOVE_THRESHOLD.length ||
dist > TOUCH_MOVE_THRESHOLD[ongoingTouches.length - 1] ||
evt.timeStamp - touchStart >= TOUCH_TIMEOUT) {
touchMoved = true; touchMoved = true;
} }
} }
@ -311,8 +318,8 @@ window.addEventListener("load", function() {
wsProtocol = "ws:"; wsProtocol = "ws:";
} }
ws = new WebSocket(wsProtocol + "//" + location.hostname + ws = new WebSocket(wsProtocol + "//" + location.hostname +
(location.port ? ":" + location.port : "") + (location.port ? ":" + location.port : "") +
"/ws"); "/ws");
ws.onmessage = function(event) { ws.onmessage = function(event) {
if (authenticated) { if (authenticated) {
@ -328,9 +335,9 @@ window.addEventListener("load", function() {
} else { } else {
pad.style.display = "flex"; pad.style.display = "flex";
} }
}; };
ws.onclose = function() { ws.onclose = function() {
if (fullscreenElement()) { if (fullscreenElement()) {
exitFullscreen(); exitFullscreen();
} }
@ -338,18 +345,18 @@ window.addEventListener("load", function() {
pad.style.display = "none"; pad.style.display = "none";
keyboard.style.display = "none" keyboard.style.display = "none"
closed.style.display = "flex"; closed.style.display = "flex";
}; };
document.getElementById("keyboardbutton").addEventListener("click", document.getElementById("keyboardbutton").addEventListener("click",
function(e) { function(e) {
if (fullscreenElement()) { if (fullscreenElement()) {
exitFullscreen(); exitFullscreen();
} }
pad.style.display = "none"; pad.style.display = "none";
keyboard.style.display = "flex"; keyboard.style.display = "flex";
text.focus(); text.focus();
history.pushState("keyboard", "Remote Keyboard"); history.pushState("keyboard", "Remote Keyboard");
}); });
if (!fullscreenEnabled()) { if (!fullscreenEnabled()) {
fullscreenbutton.style.display = "none"; fullscreenbutton.style.display = "none";
} }
@ -360,14 +367,14 @@ window.addEventListener("load", function() {
requestFullscreen(pad); requestFullscreen(pad);
} }
}); });
document.getElementById("sendbutton").addEventListener("click", document.getElementById("sendbutton").addEventListener("click",
function(e) { function(e) {
if (text.value != "") { if (text.value != "") {
ws.send("t" + text.value); ws.send("t" + text.value);
text.value = ""; text.value = "";
} }
window.history.back(); window.history.back();
}); });
window.onpopstate = function(event) { window.onpopstate = function(event) {
if (keyboard.style.display == "flex") { if (keyboard.style.display == "flex") {
pad.style.display = "flex"; pad.style.display = "flex";
@ -377,9 +384,9 @@ window.addEventListener("load", function() {
} }
}; };
document.getElementById("reloadbutton").addEventListener("click", document.getElementById("reloadbutton").addEventListener("click",
function(e) { function(e) {
location.reload(); location.reload();
}); });
pad.addEventListener("touchstart", handleStart, false); pad.addEventListener("touchstart", handleStart, false);
pad.addEventListener("touchend", handleEnd, false); pad.addEventListener("touchend", handleEnd, false);
pad.addEventListener("touchcancel", handleCancel, false); pad.addEventListener("touchcancel", handleCancel, false);

61
webdata/index.html
View file

@ -1,33 +1,36 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="utf-8" /> <head>
<meta name="viewport" content="width=device-width initial-scale=1, maximum-scale=1, user-scalable=0" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width initial-scale=1, maximum-scale=1, user-scalable=0" />
<script src="fn.js"></script> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script src="sha256.js"></script> <script src="fn.js"></script>
<title>Remote Touchpad</title> <script src="sha256.js"></script>
<link href="main.css" media="screen" rel="stylesheet" /> <title>Remote Touchpad</title>
<link href="icon.png" type="image/png" rel="shortcut icon" /> <link href="main.css" media="screen" rel="stylesheet" />
</head> <link href="icon.png" type="image/png" rel="shortcut icon" />
<body> </head>
<div id="opening">
<p>Connecting...</p> <body>
<div id="opening">
<p>Connecting...</p>
</div>
<div id="closed">
<p>Disconnected</p>
<button class="icon" id="reloadbutton">↻</button>
</div>
<div id="pad">
<p id="padlabel">Touchpad</p>
<div class="buttons">
<button class="icon" id="fullscreenbutton">⤢</button>
<button class="icon" id="keyboardbutton">⌨</button>
</div> </div>
<div id="closed"> </div>
<p>Disconnected</p> <div id="keyboard">
<button class="icon" id="reloadbutton">↻</button> <textarea id="text"></textarea>
</div> <button class="icon" id="sendbutton">➣</button>
<div id="pad"> </div>
<p id="padlabel">Touchpad</p> </body>
<div class="buttons">
<button class="icon" id="fullscreenbutton">⤢</button>
<button class="icon" id="keyboardbutton">⌨</button>
</div>
</div>
<div id="keyboard">
<textarea id="text"></textarea>
<button class="icon" id="sendbutton">➣</button>
</div>
</body>
</html> </html>

24
webdata/main.css
View file

@ -1,4 +1,9 @@
html, body, #pad, #keyboard, #opening, #closed { html,
body,
#pad,
#keyboard,
#opening,
#closed {
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: 0; margin: 0;
@ -8,12 +13,16 @@ body {
font-family: sans; font-family: sans;
} }
#pad, #sendbutton, #opening, #closed { #pad,
#sendbutton,
#opening,
#closed {
background-color: #404040 !important; background-color: #404040 !important;
background-image: url(tex.png); background-image: url(tex.png);
} }
#opening, #closed { #opening,
#closed {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -44,7 +53,10 @@ body {
word-wrap: break-word; word-wrap: break-word;
} }
#fullscreenbutton, #keyboardbutton, #sendbutton, #reloadbutton { #fullscreenbutton,
#keyboardbutton,
#sendbutton,
#reloadbutton {
background-color: transparent; background-color: transparent;
border: 1px solid black; border: 1px solid black;
height: 1.5em; height: 1.5em;
@ -53,7 +65,9 @@ body {
color: white; color: white;
} }
#fullscreenbutton, #keyboardbutton, #sendbutton { #fullscreenbutton,
#keyboardbutton,
#sendbutton {
border-bottom: none; border-bottom: none;
} }