sqozz/fetapi
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Add improved Wählscheiben logic

Browse source
This commit is contained in:
sqozz 2021-02-28 20:31:28 +01:00
parent 129c462fd8
commit 0fb653737e
1 changed files with 63 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
webinterface/js/scripts.js
View file

@ -9,25 +9,29 @@ function ws_connected(ev) {
} }
function connect_ws() { 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 = new WebSocket("ws://" + window.location.hostname + ":" + window.location.port + "/ws");
webSocket.onopen = ws_connected; webSocket.onopen = ws_connected;
} else {
console.debug("Site not opened from host, skipping websocket connection");
}
} }
function drehscheibe_init() { function drehscheibe_init() {
drehscheibe = document.querySelector("#drehscheibe") 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; drehscheibe.onmousedown = drehscheibe_click;
document.onmouseup = function(e){
document.onmousemove = function(){};
rotateBack(drehscheibe);
};
} }
function drehscheibe_click(e) { function drehscheibe_click(e) {
e.preventDefault(); e.preventDefault();
document.onmousemove = drehscheibe_drag; document.onmousemove = drehscheibe_drag;
click_degree = 0; 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) { if (e.clientX > drehscheibe_center.x) {
base_vector = [ 10, 0 ]; base_vector = [ 10, 0 ];
deg_offset = 0; deg_offset = 0;
@ -42,7 +46,34 @@ function drehscheibe_click(e) {
degree = rad * (180/Math.PI); degree = rad * (180/Math.PI);
degree = degree + deg_offset; degree = degree + deg_offset;
click_degree = degree; 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) { function drehscheibe_drag(e) {
@ -70,13 +101,33 @@ function drehscheibe_drag(e) {
} else { } else {
rotation_degree = click_degree; 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)"; 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) { 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) { function getRotation(e) {
@ -94,8 +145,8 @@ function getRotation(e) {
} }
function init() { function init() {
connect_ws();
drehscheibe_init(); drehscheibe_init();
connect_ws();
} }
document.addEventListener("DOMContentLoaded", init); document.addEventListener("DOMContentLoaded", init);