-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathrobotgui0.html
154 lines (131 loc) · 4.75 KB
/
robotgui0.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
151
152
153
154
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Browser Control</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--script src='twistgamepad.js'></script-->
<script type="text/javascript">
var robot_id="0";
var robot_cid=0;
var command = "init"
var old_command=command;
var basetime = new Date();
var keyPressed = {};
var lspeed = ".15"
var aspeed = ".5"
var lx = "&lx="
var ly = "&ly="
var lz = "&lz="
var lxn = "&lx=-"
var lyn = "&ly=-"
var lzn = "&lz=-"
var ax = "&ax="
var ay = "&ay="
var az = "&az=-"
var axn = "&ax=-"
var ayn = "&ay=-"
var azn = "&az="
// Set the BaseURL to the URL of your camera
var BaseURL = window.location.protocol + "//" + window.location.hostname
// DisplayWidth & DisplayHeight specifies the displayed width & height of the image.
// You may change these numbers, the effect will be a stretched or a shrunk image
var DisplayWidth = "600";
var DisplayHeight = "500";
// This is the path to the image generating file inside the camera itself
var File = ":8081/stream?topic=/robot_"+robot_cid+"/image&width=600&height=500&quality=100";
// No changes required below this point
var output = "";
{
// If not IE for Windows use the browser itself to display
theDate = new Date();
output = '<IMG SRC="';
output += BaseURL;
output += File;
output += '&dummy=' + theDate.getTime().toString(10);
output += '" HEIGHT="';
output += DisplayHeight;
output += '" WIDTH="';
output += DisplayWidth;
output += '" ALT="MJPEG non IE">';
}
function httpGet(theUrl)
{
var xmlHttp = null;
xmlHttp = new XMLHttpRequest();
xmlHttp.open( "GET", BaseURL + ":8082/twist?id="+robot_id+"&"+theUrl, true );
xmlHttp.send( null );
return
}
document.addEventListener('keydown', function(e) {
keyPressed[e.keyCode] = true;
}, false);
document.addEventListener('keyup', function(e) {
keyPressed[e.keyCode] = false;
}, false);
function init_all(){
document.getElementById("text3").innerHTML=output;
gameLoop();
}
function gameLoop() {
var now = new Date();
var tt = (now.getTime()-basetime.getTime())/1000;
//arrow keys to move forward and turn left/right
if (keyPressed["37"] && keyPressed["39"]) {
command=""
}
else if (keyPressed["38"] && keyPressed["40"]) {
command=""
}
else if (keyPressed["37"] && keyPressed["38"]) {
command=azn+aspeed+lx+lspeed
}
else if (keyPressed["37"] && keyPressed["40"]) {
command=azn+aspeed+lxn+lspeed
}
else if (keyPressed["39"] && keyPressed["38"]) {
command=az+aspeed+lx+lspeed
}
else if (keyPressed["39"] && keyPressed["40"]) {
command=az+aspeed+lxn+lspeed
}
else if (keyPressed["37"]) {
command=azn+aspeed;
}
else if (keyPressed["38"]) {
command=lx+lspeed;
}
else if (keyPressed["39"]) {
command=az+aspeed;
}
else if (keyPressed["40"]) {
command=lxn+lspeed;
}
else {
command=""
}
//up-down by the "w" and the "s" keys
if (keyPressed["87"]) {
command=command+lz+lspeed;
}
else if (keyPressed["83"]) {
command=command+lzn+lspeed;
}
if (old_command != command){
httpGet(command);
old_command=command;
}
document.getElementById("text4").innerHTML= command
document.getElementById("text2").innerHTML=" time ="+tt.toString()
setTimeout(gameLoop, 30);
}
</script>
</head>
<body onload="init_all();">
<b id="text2"></b><br>
<b id="text3"></b><br>
<b id="text4"></b><br>
<b id="text5"></b><br>
</body>
</html>