diff --git a/webinterface/js/scripts.js b/webinterface/js/scripts.js index 18f6f09..18ed850 100644 --- a/webinterface/js/scripts.js +++ b/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"); - webSocket.onopen = ws_connected; + 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; - 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);