fetapi/webinterface/js/scripts.js

153 lines
5 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() {
var hostname = window.location.hostname;
var port = window.location.port;
if(hostname != "" && port != "") {
webSocket = new WebSocket("ws://" + window.location.hostname + ":" + window.location.port + "/ws");
webSocket.onopen = ws_connected;
} else {
console.debug("Site not opened from host, skipping websocket connection");
}
}
function drehscheibe_init() {
drehscheibe = document.querySelector("#drehscheibe")
drehscheibe_rect = drehscheibe.getBoundingClientRect();
drehscheibe_center = { x: (drehscheibe_rect.x + drehscheibe_rect.width/2), y: (drehscheibe_rect.y + drehscheibe_rect.height/2) };
document.getElementById("nummerscheibe").style.left = drehscheibe_rect.x + "px";
document.getElementById("fingerlimiter").style.left = drehscheibe_rect.x + 2 + "px";
drehscheibe.onmousedown = drehscheibe_click;
}
function drehscheibe_click(e) {
e.preventDefault();
document.onmousemove = drehscheibe_drag;
click_degree = 0;
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;
number_segment_size = 360/14;
clicked_segment = Math.ceil((click_degree-number_segment_size/2)/(360/14))
if (clicked_segment==0) {
clicked_segment = 14;
}
switch (clicked_segment) {
case 1:
clicked_number = 1;
break;
case 6:
clicked_number = 0;
break;
default:
clicked_number = 9+(7-clicked_segment);
break;
}
if (clicked_number > 10) {
clicked_number = undefined;
}
document.onmouseup = function(e){
document.onmousemove = function(){};
entered_number = getEnteredNumber();
if (entered_number != undefined) {
document.getElementById("phonenumber").value = document.getElementById("phonenumber").value + String(entered_number);
}
rotateBack(drehscheibe);
document.onmouseup = function(e){};
};
}
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 && clicked_number != undefined){
drehscheibe.style.transform = "rotate(" + real_degree + "deg)";
}
}
function getEnteredNumber() {
if ((real_degree+rotation_degree) > 125-(360/14) && clicked_number != undefined) {
console.log("Entered number: " + clicked_number);
return clicked_number;
} else {
return undefined;
}
}
function rotateBack(e) {
start_rotation = real_degree;
rotation_per_frame = 125/(1000/60); //degrees per frame
console.log(start_rotation);
animation = setInterval(function(){
current_rotation = start_rotation - rotation_per_frame;
drehscheibe.style.transform = "rotate(" + current_rotation + "deg)";
start_rotation = current_rotation;
if (start_rotation <= 0) {
drehscheibe.style.transform = "rotate(0deg)";
clearTimeout(animation);
}
}, 1000/60); //60 fps!!1!
}
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() {
drehscheibe_init();
connect_ws();
}
document.addEventListener("DOMContentLoaded", init);