mirror of
https://github.com/Wessel/c-websocket-server.git
synced 2026-07-10 22:14:45 +02:00
228 lines
5.3 KiB
HTML
228 lines
5.3 KiB
HTML
<!--
|
|
Copyright (C) 2022 Davidson Francis <davidsondfgl@gmail.com>
|
|
|
|
This program is free software: you can redistribute it and/or modify
|
|
it under the terms of the GNU General Public License as published by
|
|
the Free Software Foundation, either version 3 of the License, or
|
|
(at your option) any later version.
|
|
|
|
This program is distributed in the hope that it will be useful,
|
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
GNU General Public License for more details.
|
|
|
|
You should have received a copy of the GNU General Public License
|
|
along with this program. If not, see <http://www.gnu.org/licenses/>
|
|
-->
|
|
<html>
|
|
<head>
|
|
<script>
|
|
let ws;
|
|
let x = 0;
|
|
let y = 0;
|
|
let move_counter = 0;
|
|
let is_connected = false;
|
|
const THRESHOLD = 1;
|
|
const DEBUG = true;
|
|
const DELIMITER = ";";
|
|
|
|
function get_touch(e) {
|
|
const evt = (typeof e.originalEvent === 'undefined') ?
|
|
e : e.originalEvent;
|
|
const touch = evt.touches[0] || evt.changedTouches[0];
|
|
return (touch);
|
|
}
|
|
|
|
function is_touch_device() {
|
|
return (('ontouchstart' in window) ||
|
|
(navigator.maxTouchPoints > 0) ||
|
|
(navigator.msMaxTouchPoints > 0));
|
|
}
|
|
|
|
function fix_num(n) {
|
|
return (n == NaN ? 0 : Math.round(n));
|
|
}
|
|
|
|
window.addEventListener("load", function () {
|
|
|
|
/* Mouse events. */
|
|
const touch = document.getElementById('touch');
|
|
touch.addEventListener('mousemove', e => {
|
|
if (is_touch_device())
|
|
return;
|
|
mouse_move(e.offsetX, e.offsetY);
|
|
});
|
|
touch.addEventListener('mousedown', e => {
|
|
mouse_down(e);
|
|
});
|
|
touch.addEventListener('mouseup', e => {
|
|
mouse_up(e);
|
|
});
|
|
touch.addEventListener('mouseenter', e => {
|
|
x = e.offsetX;
|
|
y = e.offsetY;
|
|
});
|
|
|
|
|
|
/* Touch events. */
|
|
touch.addEventListener('touchmove', e => {
|
|
const touch = get_touch(e);
|
|
mouse_move(fix_num(touch.pageX), fix_num(touch.pageY));
|
|
});
|
|
touch.addEventListener('touchstart', e => {
|
|
const touch = get_touch(e);
|
|
x = fix_num(touch.pageX);
|
|
y = fix_num(touch.pageY);
|
|
});
|
|
|
|
|
|
/* Button left. */
|
|
const btn_left = document.getElementById('btn_left');
|
|
btn_left.addEventListener('mousedown', e => {
|
|
mouse_down(e, "mouse_btn_left_down");
|
|
});
|
|
btn_left.addEventListener('mouseup', e => {
|
|
mouse_up(e, "mouse_btn_left_up");
|
|
});
|
|
|
|
/* Button right. */
|
|
const btn_right = document.getElementById('btn_right');
|
|
btn_right.addEventListener('mousedown', e => {
|
|
mouse_down(e, "mouse_btn_right_down");
|
|
});
|
|
btn_right.addEventListener('mouseup', e => {
|
|
mouse_up(e, "mouse_btn_right_up");
|
|
});
|
|
|
|
/* Connect button. */
|
|
document.getElementById("bt_conn").onclick = function(){
|
|
const addr = document.getElementById("srv_addr").value;
|
|
toggle_connection(addr);
|
|
};
|
|
});
|
|
|
|
function toggle_connection(addr) {
|
|
if (is_connected) {
|
|
is_connected = false;
|
|
ws.close();
|
|
document.getElementById("bt_conn").value = "Disconnect!";
|
|
return;
|
|
}
|
|
ws = new WebSocket(addr);
|
|
ws.onopen = function(e) {
|
|
is_connected = true;
|
|
document.getElementById("bt_conn").value = "Disconnect!";
|
|
};
|
|
ws.onclose = function(e) {
|
|
is_connected = false;
|
|
document.getElementById("bt_conn").value = "Connect!";
|
|
};
|
|
}
|
|
|
|
function mouse_move(offX, offY) {
|
|
if (!is_connected)
|
|
return;
|
|
|
|
/* Do not trigger too much events.. we do not need
|
|
* to do 'micro movements' */
|
|
move_counter++;
|
|
if (move_counter != THRESHOLD)
|
|
return;
|
|
move_counter = 0;
|
|
|
|
const movX = offX - x;
|
|
const movY = offY - y;
|
|
x = offX;
|
|
y = offY;
|
|
|
|
ws.send("mouse_move" + DELIMITER + movX + DELIMITER + movY);
|
|
if (DEBUG)
|
|
console.log(movX + " / " + movY);
|
|
}
|
|
|
|
function mouse_down(e, btn) {
|
|
let event;
|
|
if (!is_connected)
|
|
return;
|
|
|
|
if (!btn) {
|
|
if (e.button == 0)
|
|
event = "mouse_btn_left_down";
|
|
else if (e.button == 2)
|
|
event = "mouse_btn_right_down";
|
|
else
|
|
return;
|
|
}
|
|
else
|
|
event = btn;
|
|
|
|
if (DEBUG)
|
|
console.log(event);
|
|
ws.send(event);
|
|
}
|
|
function mouse_up(e, btn) {
|
|
let event;
|
|
if (!is_connected)
|
|
return;
|
|
|
|
if (!btn) {
|
|
if (e.button == 0)
|
|
event = "mouse_btn_left_up";
|
|
else if (e.button == 2)
|
|
event = "mouse_btn_right_up";
|
|
else
|
|
return;
|
|
}
|
|
else
|
|
event = btn;
|
|
|
|
if (DEBUG)
|
|
console.log(event);
|
|
ws.send(event);
|
|
}
|
|
|
|
</script>
|
|
<style type="text/css">
|
|
body {
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
overscroll-behavior-y: contain;
|
|
}
|
|
#header { padding-top: 10px; padding-left: 5px; }
|
|
#touch {
|
|
background-image: linear-gradient(white, gray);
|
|
border: solid;
|
|
border-radius: 5px;
|
|
width: 80%;
|
|
height: 78%;
|
|
margin: 0 auto;
|
|
}
|
|
#wrapper { margin: 0 auto; width: 99%; text-align: center; }
|
|
#btn_left, #btn_right {
|
|
background-image: linear-gradient(white, gray);
|
|
border: solid;
|
|
border-radius: 5px;
|
|
width: 40%;
|
|
height: 11%;
|
|
display: inline-block;
|
|
margin-right: 10px;
|
|
margin-top: 10px;
|
|
}
|
|
#btn_right {
|
|
margin-right: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body oncontextmenu="return false;">
|
|
<div id="header">
|
|
Server: <input type="text" id="srv_addr" value="ws://192.168.X.Y:8080">
|
|
<input type="button" id="bt_conn" name="bt_conn" value="Connect!"><br /><br />
|
|
</div>
|
|
|
|
<div id="touch"></div>
|
|
<div id="wrapper">
|
|
<div id="btn_left"></div><div id="btn_right"></div>
|
|
</div>
|
|
</body>
|
|
</html>
|