-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathvirtualJoystick.html
118 lines (110 loc) · 3.08 KB
/
virtualJoystick.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
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
overflow : hidden;
padding : 0;
margin : 0;
background-color: #BBB;
}
#info {
position : absolute;
top : 0;
width : 100%;
padding : 5px;
text-align : center;
}
#info a {
color : #66F;
text-decoration : none;
}
#info a:hover {
text-decoration : underline;
}
#container {
width : 100%;
height : 100%;
overflow : hidden;
padding : 0;
margin : 0;
-webkit-user-select : none;
-moz-user-select : none;
}
</style>
</head>
<body onload="init()">
<div id="container">
<img id="stream" src="http://192.168.1.51:8080/?action=stream" onerror="this.src='./apps/onion-webcam/not_available.jpg'" class="style-scope onion-webcam">
</div>
<div id="info">
<span id="result"></span>
</div>
<script src="./SocketServer/WebSocketJoystick.js"></script>
<script src="virtualjoystick.js"></script>
<script>
console.log("touchscreen is", VirtualJoystick.touchScreenAvailable() ? "available" : "not available");
var joystick = new VirtualJoystick({
container : document.getElementById('container'),
mouseSupport : true
});
joystick.addEventListener('touchStart', function(){
console.log('down');
});
joystick.addEventListener('touchEnd', function(){
console.log('up')
});
var x = 0;
var y = 0;
setInterval(function(){
if ( joystick.deltaX() )
{
if ( joystick.deltaX() !== x )
{
if ( Math.abs(x - joystick.deltaX()) >= 10 )
{
x = (Math.ceil(joystick.deltaX() / 10) - 1) * 10;
socket.send(' x=' + x);
}
}
}
else
{
if ( x !== 0 )
{
x = 0;
socket.send(' x=0');
}
}
if ( joystick.deltaY() )
{
if ( joystick.deltaY() !== y )
{
if ( Math.abs(y - joystick.deltaY()) >= 10 )
{
y = (Math.ceil(joystick.deltaY() / 10) - 1) * 10;
socket.send(' y=' + y);
}
}
}
else
{
if ( y !== 0 )
{
y = 0;
socket.send(' y=0');
}
}
var outputEl = document.getElementById('result');
outputEl.innerHTML = '<b>Result:</b> '
+ ' dx:'+joystick.deltaX()
+ ' dy:'+joystick.deltaY()
+ (joystick.right() ? ' right' : '')
+ (joystick.up() ? ' up' : '')
+ (joystick.left() ? ' left' : '')
+ (joystick.down() ? ' down' : '')
}, 1/30 * 1000);
</script>
</body>
</html>