251 lines
8.5 KiB
HTML
251 lines
8.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>MBC Bootjes</title>
|
|
<meta name="viewport" content="user-scalable=no">
|
|
</head>
|
|
<body style="position:fixed;margin:0;font-family:'GillSans','GillSansMT',Calibri,'TrebuchetMS',sans-serif;color:rgb(128,128,128);font-size:xx-large;">
|
|
<h1 style="text-align:center;width:100vw">MBC Het Groote Dok</h1>
|
|
<div id="boats"></div>
|
|
<canvas id="canvas" name="game" style="display:none"></canvas>
|
|
<div id="clientId"></div>
|
|
<script>
|
|
var clientId = -1;
|
|
var ca = document.cookie.split(';');
|
|
for (var i=0; i<ca.length; i++)
|
|
{
|
|
var c = ca[i].trim();
|
|
if (c.indexOf("clientId") == 0){
|
|
clientId = c.substring("clientId=".length, c.length);
|
|
}
|
|
}
|
|
if (clientId == -1)
|
|
{
|
|
clientId = Math.floor(Math.random() * 10000).toString();
|
|
document.cookie = "clientId=" + clientId;
|
|
}
|
|
document.getElementById("clientId").innerHTML = "client id: " + clientId;
|
|
// console.log(data);
|
|
var boatListEl = document.getElementById('boats');
|
|
var stickEl = document.getElementById('canvas');
|
|
|
|
var connection = false;
|
|
var refresh_timer = false;
|
|
var state = "connecting";
|
|
|
|
function conn_onopen()
|
|
{
|
|
connection.send(clientId + ';4675;' + Math.floor(new Date().getTime()/1000.0).toString());
|
|
setTimeout(() => { connection.send(clientId + ';boats'); }, 100);
|
|
state = "connected";
|
|
};
|
|
|
|
function conn_onerror(error)
|
|
{
|
|
console.log('WebSocket Error ', error);
|
|
alert('WebSocket Error ', error);
|
|
};
|
|
|
|
function conn_onmessage(e)
|
|
{
|
|
let data = e.data.split(':');
|
|
if (data[0] == "boats")
|
|
{
|
|
if (state == 'connected')
|
|
{
|
|
console.log("boats: ", data);
|
|
boatListEl.innerHTML = "";
|
|
stickEl.style.display = 'none';
|
|
boatListEl.style.display = 'block';
|
|
for (let boat in data)
|
|
{
|
|
boat = data[boat].split(';');
|
|
if ((boat.length == 3) && (boat[2] == 'available'))
|
|
{
|
|
console.log("render boat", boat);
|
|
let el = document.createElement("div");
|
|
el.style.textAlign = "center";
|
|
el.style.borderRadius = "10px";
|
|
el.style.padding = "10px";
|
|
el.style.margin = "5px 25%";
|
|
if (boat[2] == 'available')
|
|
{
|
|
el.style.backgroundColor = "#242495";
|
|
el.style.color = "white";
|
|
el.style.cursor = "pointer";
|
|
el.addEventListener('click', selectBoat);
|
|
}
|
|
else
|
|
{
|
|
el.style.backgroundColor = "#CCCCCC";
|
|
el.style.color = "black";
|
|
el.style.cursor = "not-allowed";
|
|
}
|
|
el.id = "boat" + boat[0];
|
|
el.innerHTML = boat[1];
|
|
boatListEl.appendChild(el);
|
|
}
|
|
}
|
|
if (refresh_timer)
|
|
{
|
|
clearTimeout(refresh_timer);
|
|
}
|
|
refresh_timer = setTimeout(()=>{connection.send(clientId + ';boats')}, 1000)
|
|
}
|
|
}
|
|
else if (data[0] == "FAIL")
|
|
{
|
|
console.error("ground station send FAIL");
|
|
connection.send(clientId + ';boats');
|
|
state = "connected";
|
|
}
|
|
else
|
|
{
|
|
console.log('Server: ', e.data);
|
|
}
|
|
};
|
|
|
|
function connect()
|
|
{
|
|
connection = new WebSocket('ws://10.254.0.1:8080/', ['mbcRcRf']);
|
|
connection.onopen = conn_onopen;
|
|
connection.onerror = conn_onerror;
|
|
connection.onmessage = conn_onmessage;
|
|
}
|
|
|
|
function selectBoat(e)
|
|
{
|
|
clearTimeout(refresh_timer);
|
|
connection.send(clientId + ';ctrl;' + e.target.id.split('boat')[1]);
|
|
console.log('ctrl:', e.target.id.split('boat')[1]);
|
|
stickEl.style.display = 'block';
|
|
boatListEl.style.display = 'none';
|
|
}
|
|
|
|
function send(x,y,angle){
|
|
factor = (2**8-1)/400;
|
|
x = Math.round((x + 200) * factor);
|
|
y = Math.round((y + 200) * factor);
|
|
var data = clientId + ";d;" + x.toString() + "," + y.toString();
|
|
connection.send(data);
|
|
}
|
|
|
|
connect();
|
|
</script>
|
|
<script>
|
|
var canvas, ctx;
|
|
|
|
window.addEventListener('load', () => {
|
|
|
|
canvas = document.getElementById('canvas');
|
|
ctx = canvas.getContext('2d');
|
|
resize();
|
|
|
|
document.addEventListener('mousedown', startDrawing);
|
|
document.addEventListener('mouseup', stopDrawing);
|
|
document.addEventListener('mousemove', Draw);
|
|
|
|
document.addEventListener('touchstart', startDrawing);
|
|
document.addEventListener('touchend', stopDrawing);
|
|
document.addEventListener('touchcancel', stopDrawing);
|
|
document.addEventListener('touchmove', Draw);
|
|
window.addEventListener('resize', resize);
|
|
});
|
|
|
|
|
|
|
|
|
|
var width, height, radius, x_orig, y_orig;
|
|
function resize() {
|
|
width = window.innerWidth;
|
|
radius = 200;
|
|
height = radius * 4.5;
|
|
ctx.canvas.width = width;
|
|
ctx.canvas.height = height;
|
|
background();
|
|
joystick(width / 2, height / 2);
|
|
}
|
|
|
|
function background() {
|
|
x_orig = width / 2;
|
|
y_orig = height / 2;
|
|
|
|
ctx.beginPath();
|
|
ctx.arc(x_orig, y_orig, radius + 20, 0, Math.PI * 2, true);
|
|
ctx.fillStyle = '#ECE5E5';
|
|
ctx.fill();
|
|
}
|
|
|
|
function joystick(width, height) {
|
|
ctx.beginPath();
|
|
ctx.arc(width, height, radius, 0, Math.PI * 2, true);
|
|
ctx.fillStyle = '#F08080';
|
|
ctx.fill();
|
|
ctx.strokeStyle = '#F6ABAB';
|
|
ctx.lineWidth = 8;
|
|
ctx.stroke();
|
|
}
|
|
|
|
let coord = { x: 0, y: 0 };
|
|
let paint = false;
|
|
|
|
function getPosition(event) {
|
|
var mouse_x = event.clientX || event.touches[0].clientX;
|
|
var mouse_y = event.clientY || event.touches[0].clientY;
|
|
coord.x = mouse_x - canvas.offsetLeft;
|
|
coord.y = mouse_y - canvas.offsetTop;
|
|
}
|
|
|
|
function is_it_in_the_circle() {
|
|
var current_radius = Math.sqrt(Math.pow(coord.x - x_orig, 2) + Math.pow(coord.y - y_orig, 2));
|
|
if (radius >= current_radius) return true
|
|
else return false
|
|
}
|
|
|
|
|
|
function startDrawing(event) {
|
|
paint = true;
|
|
getPosition(event);
|
|
if (is_it_in_the_circle()) {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
background();
|
|
joystick(coord.x, coord.y);
|
|
Draw();
|
|
}
|
|
}
|
|
|
|
|
|
function stopDrawing() {
|
|
paint = false;
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
background();
|
|
joystick(width / 2, height / 2);
|
|
}
|
|
|
|
function Draw(event) {
|
|
|
|
if (paint) {
|
|
getPosition(event);
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
background();
|
|
var angle_in_degrees, x, y, speed;
|
|
var angle = Math.atan2((coord.y - y_orig), (coord.x - x_orig));
|
|
|
|
if (Math.sign(angle) == -1) {
|
|
angle_in_degrees = Math.round(-angle * 180 / Math.PI);
|
|
}
|
|
else {
|
|
angle_in_degrees = Math.round(360 - angle * 180 / Math.PI);
|
|
}
|
|
|
|
x = Math.max(-radius, Math.min(radius, coord.x - x_orig));
|
|
y = Math.max(-radius, Math.min(radius, coord.y - y_orig));
|
|
joystick(x + x_orig, y + y_orig);
|
|
|
|
send(x, y, angle_in_degrees);
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|