-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
executable file
·104 lines (98 loc) · 8.37 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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<html>
<head>
<title>Phone Motion Streamer</title>
<style>
body {
font-family: "Helvetica Neue", Helvetica;
padding:2em;
background: radial-gradient(white, rgb(200,200,234));
}
h1 {
font-weight:300;
text-align:center;
color:#888;
}
#status {
height:4em;
color:#555;
text-align:center;
}
input[type=text] {
box-sizing:border-box;
width:100%;
padding:1em;
-webkit-appearance:none;
border:1px solid #ccc;
border-radius:none;
}
input[type=submit] {
background-color:#444;
color:#ccc;
display:block;
padding:1em;
border:1px solid #444;
-webkit-appearance:none;
box-sizing:border-box;
width:100%;
border-radius:none;
}
.hide {
display:none;
}
.csspinner{position:relative}.csspinner:before{content:"";z-index:1;position:absolute;top:0;left:0;display:block;height:100%;width:100%;background-color:#999;opacity:.6}.csspinner:after{z-index:2;content:"";height:40px;width:40px;position:absolute;top:50%;left:50%;margin:-20px 0 0 -20px;transition:all .75s ease 0s;-webkit-transition:all .75s ease 0s;border-radius:100%;border-top:4px solid #555;animation:standard .75s infinite linear;-webkit-animation:standard .75s infinite linear}.csspinner.no-overlay:before{content:none;display:none}@-webkit-keyframes standard{from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}@keyframes standard{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.csspinner.traditional:after{border-right:4px solid #777;border-top:4px solid #777;border-left:4px solid #999;border-bottom:4px solid #bbb}.csspinner.double-up:after{border-right:4px solid #e74c3c;border-top:4px double #e74c3c;border-left:4px double #e74c3c;border-bottom:4px double #e74c3c}.csspinner.duo:after{border-right:4px solid #333;border-left:4px solid #333;border-top:4px solid #f1c40f;border-bottom:4px solid #f1c40f}.csspinner.sphere.horizontal:after,.csspinner.sphere:after{border-radius:100%;animation:sphere .5s infinite;-webkit-animation:sphere .5s infinite;border:none;height:40px}.csspinner.sphere.vertical:after{border-radius:100%;animation:sphere-v .5s infinite;-webkit-animation:sphere-v .5s infinite;border:none;height:40px}@-webkit-keyframes sphere{from{box-shadow:inset 45px 0 10px rgba(0,0,0,0.5)}to{box-shadow:inset -45px 0 10px rgba(0,0,0,0.5)}}@keyframes sphere{from{box-shadow:inset 45px 0 10px rgba(0,0,0,0.5)}to{box-shadow:inset -45px 0 10px rgba(0,0,0,0.5)}}@-webkit-keyframes sphere-v{from{box-shadow:inset 0 45px 10px rgba(0,0,0,0.5)}to{box-shadow:inset 0 -45px 10px rgba(0,0,0,0.5)}}@keyframes sphere-v{from{box-shadow:inset 0 45px 10px rgba(0,0,0,0.5)}to{box-shadow:inset 0 -45px 10px rgba(0,0,0,0.5)}}.csspinner.bar:after{height:20px;width:40px;border-radius:0;border:none;animation:bar 1s infinite linear;-webkit-animation:bar 1s infinite linear}@-webkit-keyframes bar{from{box-shadow:inset 0 0 0 rgba(0,0,0,0.5)}to{box-shadow:inset 80px 0 0 rgba(0,0,0,0.5)}}@keyframes bar{from{box-shadow:inset 0 0 0 rgba(0,0,0,0.5)}to{box-shadow:inset 80px 0 0 rgba(0,0,0,0.5)}}.csspinner.bar.follow:after{animation:bar-follow 1s infinite linear;-webkit-animation:bar-follow 1s infinite linear}@-webkit-keyframes bar-follow{0%{box-shadow:inset 40px 0 0 rgba(0,0,0,0.5)}100%{box-shadow:inset -40px 0 0 rgba(0,0,0,0.5)}}@keyframes bar-follow{0%{box-shadow:inset 40px 0 0 rgba(0,0,0,0.5)}100%{box-shadow:inset -40px 0 0 rgba(0,0,0,0.5)}}.csspinner.line:after{height:20px;border-radius:0;border:none;box-shadow:inset -10px 0 0 rgba(0,0,0,0.5);animation:line .75s infinite linear;-webkit-animation:line .75s infinite linear}@-webkit-keyframes line{from{width:10px}to{width:50px}}@keyframes line{from{width:10px}to{width:50px}}.csspinner.line.grow:after{animation:line .75s infinite linear,line-grow .75s infinite linear;-webkit-animation:line .75s infinite linear,line-grow .75s infinite linear}@keyframes line-grow{0%{transform:scaleY(1);-webkit-transform:scaleY(1)}50%{transform:scaleY(2);-webkit-transform:scaleY(2)}100%{transform:scaleY(1);-webkit-transform:scaleY(1)}}@-webkit-keyframes line-grow{0%{transform:scaleY(1);-webkit-transform:scaleY(1)}50%{transform:scaleY(2);-webkit-transform:scaleY(2)}100%{transform:scaleY(1);-webkit-transform:scaleY(1)}}.csspinner.line.back-and-forth:after{animation:line-back-and-forth 1s infinite linear;-webkit-animation:line-back-and-forth 1s infinite linear}@-webkit-keyframes line-back-and-forth{0%{width:10px}50%{width:50px}100%{width:10px}}@keyframes line-back-and-forth{0%{width:10px}50%{width:50px}100%{width:10px}}.csspinner.line.back-and-forth.grow:after{animation:line-back-and-forth 1s infinite linear,line-back-and-forth-grow 1s infinite linear;-webkit-animation:line-back-and-forth 1s infinite linear,line-back-and-forth-grow 1s infinite linear}@keyframes line-back-and-forth-grow{0%{transform:scaleY(1);-webkit-transform:scaleY(1)}25%{transform:scaleY(2);-webkit-transform:scaleY(2)}50%{transform:scaleY(1);-webkit-transform:scaleY(1)}75%{transform:scaleY(2);-webkit-transform:scaleY(2)}100%{transform:scaleY(1);-webkit-transform:scaleY(1)}}@-webkit-keyframes line-back-and-forth-grow{0%{transform:scaleY(1);-webkit-transform:scaleY(1)}25%{transform:scaleY(2);-webkit-transform:scaleY(2)}50%{transform:scaleY(1);-webkit-transform:scaleY(1)}75%{transform:scaleY(2);-webkit-transform:scaleY(2)}100%{transform:scaleY(1);-webkit-transform:scaleY(1)}}.csspinner.shadow:after{animation:spin-shadow .25s infinite linear;-webkit-animation:spin-shadow .25s infinite linear;border-radius:100%;border:none}.csspinner.shadow.oval.left:after,.csspinner.shadow.oval:after{animation:spin-shadow .25s infinite linear;-webkit-animation:spin-shadow .25s infinite linear;border-radius:100%;border:none;border-radius:40% 100%}.csspinner.shadow.oval.right:after{animation:spin-shadow .25s infinite linear;-webkit-animation:spin-shadow .25s infinite linear;border-radius:100%;border:none;border-radius:100% 40%}@-webkit-keyframes spin-shadow{0%{box-shadow:inset 5px 5px 5px rgba(0,0,0,0.5)}25%{box-shadow:inset -5px 5px 5px rgba(0,0,0,0.5)}50%{box-shadow:inset -5px -5px 5px rgba(0,0,0,0.5)}100%{box-shadow:inset 5px -5px 5px rgba(0,0,0,0.5)}}@keyframes spin-shadow{0%{box-shadow:inset 5px 5px 5px rgba(0,0,0,0.5)}25%{box-shadow:inset -5px 5px 5px rgba(0,0,0,0.5)}50%{box-shadow:inset -5px -5px 5px rgba(0,0,0,0.5)}100%{box-shadow:inset 5px -5px 5px rgba(0,0,0,0.5)}}
</style>
<meta charset="utf-8">
<meta name="viewport" content="minimal-ui,width=device-width, user-scalable=no">
</head>
<body>
<h1>Phone Motion Streamer</h1>
<form id="enter">
<input type="text" id="sending-id" placeholder="Enter an ID for this measurement" autocorrect="off" autocapitalize="off">
<input type="submit" value="Start Streaming">
</form>
<div id="status"></div>
<script src="/socket.io/socket.io.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function(){
var socket = io.connect('http://<<IP>>');
var streaming = false;
var status = document.getElementById('status');
var sendingId = document.getElementById('sending-id');
var form = document.getElementById('enter');
var startStreaming = function (e) {
e.preventDefault();
streaming = true;
form.style.display='none';
status.className='csspinner line back-and-forth no-overlay';
status.style.display='block';
document.activeElement.blur();
return false;
};
form.addEventListener("submit",startStreaming);
if (window.DeviceMotionEvent !== undefined) {
window.ondevicemotion = function(e) {
if (!streaming) return false;
socket.emit('motion', {
'sender':sendingId.value,
'acceleration':e.accelerationIncludingGravity,
'interval':e.interval,
'rotationRate':e.rotationRate
});
};
window.ondeviceorientation = function(e) {
if (!streaming) return false;
socket.emit('orientation', {
'sender':sendingId.value,
'alpha': e.alpha,
'beta': e.beta,
'gamma': e.gamma
});
};
} else {
status.style.display = 'block';
status.innerHTML = 'Unfortunately, this device does not have the right sensors.';
}
});
</script>
</body>
</html>