Add improved Wählscheiben logic

webinterface/js/scripts.js

@@ -9,25 +9,29 @@ function ws_connected(ev) {
 }
 
 function connect_ws() {
-  webSocket = new WebSocket("ws://" + window.location.hostname + ":" + window.location.port + "/ws");
+  var hostname = window.location.hostname;
-  webSocket.onopen = ws_connected;
+  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;
-  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;
@@ -42,7 +46,34 @@ function drehscheibe_click(e) {
   degree = rad * (180/Math.PI);
   degree = degree + deg_offset;
   click_degree = degree;
-  //console.log("Click deg: " + click_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) {
@@ -70,13 +101,33 @@ function drehscheibe_drag(e) {
   } else {
     rotation_degree = click_degree;
   }
-  if(real_degree+rotation_degree < 125){
+  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) {
-  drehscheibe.style.transform = "rotate(" + 0 + "deg)";
+  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) {
@@ -94,8 +145,8 @@ function getRotation(e) {
 }
 
 function init() {
-  connect_ws();
   drehscheibe_init();
+  connect_ws();
 }
 
 document.addEventListener("DOMContentLoaded", init);