fetapi/webinterface/js/scripts.js

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);