fetapi/webinterface/js/scripts.js
2021-02-28 16:54:46 +01:00

102 lines
3.3 KiB
JavaScript

function status_update(ev) {
console.log("Got message from server: " + ev.data);
}
function ws_connected(ev) {
console.log("Connection to fetapi now active!");
ev.target.onmessage = status_update;
ev.target.send("test");
}
function connect_ws() {
webSocket = new WebSocket("ws://" + window.location.hostname + ":" + window.location.port + "/ws");
webSocket.onopen = ws_connected;
}
function drehscheibe_init() {
drehscheibe = document.querySelector("#drehscheibe")
drehscheibe.onmousedown = drehscheibe_click;
document.onmouseup = function(e){
document.onmousemove = function(){};
rotateBack(drehscheibe);
};
}
function drehscheibe_click(e) {
e.preventDefault();
document.onmousemove = drehscheibe_drag;
click_degree = 0;
drehscheibe_rect = drehscheibe.getBoundingClientRect();
drehscheibe_center = { x: (drehscheibe_rect.x + drehscheibe_rect.width/2), y: (drehscheibe_rect.y + drehscheibe_rect.height/2) };
if (e.clientX > drehscheibe_center.x) {
base_vector = [ 10, 0 ];
deg_offset = 0;
} else {
base_vector = [ -10, 0 ];
deg_offset = 180;
}
mouse_vector = [ e.clientX - drehscheibe_center.x, e.clientY - drehscheibe_center.y ];
vector_product = (mouse_vector[0]*base_vector[1])-(mouse_vector[1]*base_vector[0]);
scalar_product = (Math.sqrt(Math.pow(mouse_vector[0], 2) + Math.pow(mouse_vector[1], 2))) * Math.sqrt(Math.pow(base_vector[0], 2) + Math.pow(base_vector[1], 2))
rad = Math.acos(vector_product/scalar_product);
degree = rad * (180/Math.PI);
degree = degree + deg_offset;
click_degree = degree;
//console.log("Click deg: " + click_degree);
}
function drehscheibe_drag(e) {
max_rotate = 125;
drehscheibe_rect = drehscheibe.getBoundingClientRect();
drehscheibe_center = { x: (drehscheibe_rect.x + drehscheibe_rect.width/2), y: (drehscheibe_rect.y + drehscheibe_rect.height/2) };
if(e.clientX > drehscheibe_center.x) {
base_vector = [ 10, 0 ];
degree_offset = 0;
} else if (e.clientX < drehscheibe_center.x) {
base_vector = [ -10, 0];
degree_offset = 180;
}
mouse_vector = [ e.clientX - drehscheibe_center.x, e.clientY - drehscheibe_center.y ];
vector_product = (mouse_vector[0]*base_vector[1])-(mouse_vector[1]*base_vector[0]);
scalar_product = (Math.sqrt(Math.pow(mouse_vector[0], 2) + Math.pow(mouse_vector[1], 2))) * Math.sqrt(Math.pow(base_vector[0], 2) + Math.pow(base_vector[1], 2))
rad = Math.acos(vector_product/scalar_product);
degree = rad * (180/Math.PI);
real_degree = (degree+degree_offset)-click_degree;
if(real_degree < 0) {
real_degree = 360 + real_degree;
}
if(click_degree > 125) {
rotation_degree = -(360-click_degree);
} else {
rotation_degree = click_degree;
}
if(real_degree+rotation_degree < 125){
drehscheibe.style.transform = "rotate(" + real_degree + "deg)";
}
}
function rotateBack(e) {
drehscheibe.style.transform = "rotate(" + 0 + "deg)";
}
function getRotation(e) {
var st = window.getComputedStyle(e, null);
var tr = st.getPropertyValue("transform");
var values = tr.split('(')[1],
values = values.split(')')[0],
values = values.split(',');
var a = values[0];
var b = values[1];
var c = values[2];
var d = values[3];
var angle = Math.asin(b) * (180/Math.PI);
return angle;
}
function init() {
connect_ws();
drehscheibe_init();
}
document.addEventListener("DOMContentLoaded", init);