-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
150 lines (140 loc) · 5.81 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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE HTML!>
<html>
<head>
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, widdiv=device-widdiv, height=device-height" />
<style>
input {
min-height:1.3cm;
min-width:80%;
max-width:100%;
margin-top: 0.3cm;
padding:0.1cm;
font-size:0.5cm;
border-color: green;
background-color: rgba(200,255,200,0.3);
}
.reset {
border-color:red;
background-color: rgba(255,200,200,0.3);
}
body{
text-align: center;
}
</style>
</head>
<body style='align:center' >
<input type=button value="Rotate View"
ontouchstart = "set_params('view',true,false,false);"
ontouchend = "reset_params();"
>
<!-- <input type=button value="Rotate and move View"
ontouchstart = "set_params('view',true,true,false);"
ontouchend = "reset_params();">
<input type=button value="move view"
ontouchstart = "set_params('view',false,true,false);"
ontouchend = "reset_params();"> -->
<input class=reset type=button value="Reset view angle" onclick="client.send('reset_view_angle');">
<input type=button value="Rotate selection"
ontouchstart = "set_params('selection',true,false,false);"
ontouchend = "reset_params();">
<!-- <input type=button value="rotate and move selection"
ontouchstart = "set_params('selection',true,true,false);"
ontouchend = "reset_params();">
<input type=button value="move selection"
ontouchstart = "set_params('selection',false,true,false);"
ontouchend = "reset_params();"> -->
<input type=button value="Rotate camera"
ontouchstart = "set_params('camera',true,false,false);"
ontouchend = "reset_params();">
<!-- <input type=button value="rotate and move camera"
ontouchstart = "set_params('camera',true,true,false);"
ontouchend = "reset_params();">
<input type=button value="move camera"
ontouchstart = "set_params('camera',false,true,false);"
ontouchend = "reset_params();"> -->
<input type=button value="Rotate camera absolute"
ontouchstart = "set_params('camera',true,false,true);"
ontouchend = "reset_params();">
<input class=reset type=button value="Reset camera angle" onclick="client.send('reset_camera_angle');">
<!-- <textarea id='debug' rows=5></textarea> -->
</body>
<script>
addr="ws://" + document.location.hostname + ":9001/";
console.log(addr)
client = new WebSocket(addr);
xtext=document.getElementById('debug')
move_offsets={x:-0.25,y:-0.01,z:0.32}
window.what=''
window.rotate = false
window.move = false
window.orientation = false
function set_params(Swhat,Srotate,Smove,Sorientation){
window.what=Swhat
window.rotate=Srotate
window.move=Smove
window.orientation=Sorientation
}
function reset_params() {
window.what=''
window.rotate = false
window.move = false
window.orientation = false
}
function do_rotate(what,x,y,z)
{
client.send('rotate_' + window.what + ' ' + x + ' ' + y + ' ' + z + "\n");
}
function do_rotateabsolute(what,x,y,z)
{
client.send('rotateabsolute_' + window.what + ' ' + x + ' ' + y + ' ' + z + "\n");
}
function do_move(what,x,y,z)
{
client.send('move_' + window.what + ' ' + (move_offsets.x+x) + ' ' + (move_offsets.y+y) + ' ' + (move_offsets.z+z) + "\n");
}
function deviceMotionHandler(e)
{
//xtext.innerHTML = window.what + window.rotate + window.move + window.orientation
if (window.what){
if (window.rotate && !window.orientation){
with (e.rotationRate){
if ((alpha) || (gamma) || (beta)){
if (window.what == 'view')
do_rotate(window.what,beta* 0.00245436718 ,-alpha * 0.00245436718 ,-gamma * 0.00245436718)
else
do_rotate(window.what,alpha* 0.00245436718 ,beta * 0.00245436718 ,gamma * 0.00245436718)
}
}
}
if (window.move){
with (e.acceleration){
if (x||y||z){
do_move(window.what,x,y,z)
}
}
}
}
}
function deviceOrientationHandler(e)
{
//xtext.innerHTML=e.alpha+"\n"+e.beta+"\n"+e.gamma;
//xtext.innerHTML=what+', '+rotate+ "," + move;
if (window.what){
if (window.rotate && window.orientation){
with (e){
if ((alpha) || (gamma) || (beta)){
do_rotateabsolute(window.what,beta* 0.0245436718 ,gamma * 0.0245436718 ,alpha * 0.0245436718)
}
}
}
}
}
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler, false);
window.addEventListener('deviceorientation', deviceOrientationHandler, false);
} else {
alert('Device Motion Event NOT supported');
}
</script>
</head>
</html>