-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
90 lines (83 loc) · 3.56 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Accelerometer Demo</title>
<style>
.indicatorDot{
width: 30px;
height: 30px;
background-color: #ffab56;
border-radius: 50%;
position:fixed;
}
</style>
<script>
/*
const ws = new WebSocket("ws://172.20.10.5:8082");
ws.addEventListener("open", () => {
console.log("We are connected");
})
*/
var ws = new WebSocket('wss://172.20.10.5:8000');
// event emmited when connected
ws.onopen = function () {
console.log('websocket is connected ...')
// sending a send event to websocket server
ws.send('connectedyayyy')
}
// event emmited when receiving message
ws.onmessage = function (ev) {
console.log(ev);
}
var px = 50; // Position x and y
var py = 50;
var vx = 0.0; // Velocity x and y
var vy = 0.0;
var updateRate = 1/60; // Sensor refresh rate
function getAccel(){
DeviceMotionEvent.requestPermission().then(response => {
if (response == 'granted') {
// Add a listener to get smartphone orientation
// in the alpha-beta-gamma axes (units in degrees)
window.addEventListener('deviceorientation',(event) => {
// Expose each orientation angle in a more readable way
rotation_degrees = event.alpha;
frontToBack_degrees = event.beta;
leftToRight_degrees = event.gamma;
var rd = Math.trunc(rotation_degrees);
var fd = Math.trunc(frontToBack_degrees);
var ld = Math.trunc(leftToRight_degrees);
//ws.send("rd is " + rd.toString() + ", " + "fd is " + fd.toString() + ", " + "ld is " + ld.toString());
ws.send(leftToRight_degrees-90);
// Update velocity according to how tilted the phone is
// Since phones are narrower than they are long, double the increase to the x velocity
/*
vx = vx + leftToRight_degrees * updateRate*2;
vy = vy + frontToBack_degrees * updateRate;
// Update position and clip it to bounds
px = px + vx*.5;
if (px > 98 || px < 0){
px = Math.max(0, Math.min(98, px)) // Clip px between 0-98
vx = 0;
}
py = py + vy*.5;
if (py > 98 || py < 0){
py = Math.max(0, Math.min(98, py)) // Clip py between 0-98
vy = 0;
}
dot = document.getElementsByClassName("indicatorDot")[0]
dot.setAttribute('style', "left:" + (px) + "%;" +
"top:" + (py) + "%;");
*/
});
}
});
}
</script>
</head>
<body style="background-color:rgb(255, 255, 255);">
<button id="accelPermsButton" style="height:50px;" onclick="getAccel()"><h1>Get Accelerometer Permissions</h1></button>
<!-- <div class="indicatorDot" style="left:30%; top:30%;"></div> -->
</body>
</html>