102 lines
3.3 KiB
JavaScript
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);
|