-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathros2-debug.html
156 lines (155 loc) · 4.8 KB
/
ros2-debug.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
155
156
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://static.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
<script src="https://static.robotwebtools.org/roslibjs/current/roslib.js"></script>
<script>
const $ = document.querySelector.bind(document);
const ros = new ROSLIB.Ros();
ros.on("error", error => console.log(error) );
ros.on("connection", () => {
$("#status").innerText = "connected";
const detected = new ROSLIB.Topic({
ros: ros,
name: "/object_classifier/output",
messageType: "duckietown_msgs/ClassifiedObject"
});
detected.subscribe(m => {
const t= $("#detected");
t.value += `${m.label}\n`;
t.scrollTop = t.scrollHeight;
});
const detected_all = new ROSLIB.Topic({
ros: ros,
name: "/object_classifier/output_all",
messageType: "duckietown_msgs/ClassifiedObject"
});
detected_all.subscribe(m => {
const t = $("#detected_all");
t.value += `${m.label} (${m.score})\n`;
t.scrollTop = t.scrollHeight;
});
const ultrasound = new ROSLIB.Topic({
ros: ros,
name: "/sensor/ultrasound",
messageType: "sensor_msgs/Range"
});
ultrasound.subscribe(m => ($("#ultrasound").value = m.range));
const infrared = new ROSLIB.Topic({
ros: ros,
name: "/sensor/infrared",
messageType: "sensor_msgs/Range"
});
infrared.subscribe(m => ($("#infrared").value = m.range));
const obstacle = new ROSLIB.Topic({
ros: ros,
name: "/obstacle",
messageType: "duckietown_msgs/BoolStamped"
});
obstacle.subscribe(m => ($("#obstacle").value = m.data));
const car_cmd = new ROSLIB.Topic({
ros: ros,
name: "/sensor/car_cmd",
messageType: "duckietown_msgs/Twist2DStamped"
});
car_cmd.subscribe(m => {
$("#velocity").value = m.v;
$("#omega").value = m.omega;
});
const wheels_cmd = new ROSLIB.Topic({
ros: ros,
name: "/wheels_cmd",
messageType: "duckietown_msgs/WheelsCmdStamped"
});
wheels_cmd.subscribe(m => {
$("#rwheel").value = m.vel_right;
$("#lwheel").value = m.vel_left;
});
const joystick = new ROSLIB.Topic({
ros: ros,
name: "/joy",
messageType: "sensor_msgs/Joy"
});
joystick.subscribe(m => {
console.log(JSON.stringify(m));
let axes = "";
const a = Object.keys(m.axes);
for (let i=0; i<a.length; i++) {
axes += ` [${a[i]}]=${m.axes[a[i]]}`;
}
$("#axes").innerText = axes;
let buttons = "";
const b = Object.keys(m.buttons);
for (let i=0; i<b.length; i++) {
if (m.buttons[b[i]]) {
buttons += ` ${b[i]}`;
}
}
$("#buttons").innerText = buttons;
});
});
ros.on("close", () => ($("#status").innerText = "disconnected") );
window.onload = () => {
$("#connect").onclick = () => {
const address = $("#bridge").value;
localStorage.setItem("bridge", address);
ros.close();
$("#status").innerText = "connecting...";
ros.connect("ws://" + address + ":9090");
$("#jpeg").src = "http://" + address + ":8001/"; // TODO: what if connection is terminated? need to restart manually...
};
const address = localStorage.getItem("bridge");
if (address) {
$("#bridge").value = address;
}
const img = new ROSLIB.Topic({
ros: ros,
name: $("#topic").value,
queue_length: 1,
messageType: "sensor_msgs/CompressedImage"
});
$("#refresh_image").onclick = () => {
img.unsubscribe();
img.subscribe(message => {
const data = new Uint8Array(Object.values(message.data));
const blob = new Blob([data], {type:"image/jpeg"});
$("#image").src = window.URL.createObjectURL(blob);
img.unsubscribe();
});
}
};
</script>
</head>
<body>
<p>ROS2 Bridge: <input id="bridge" type="text" value="10.194.183.145"> <input id="connect" type="button" value="Connect"></p>
<p>ROS2 Compressed image topic: <input id="topic" type="text" value="/image/compressed"></p>
<p>Status: <span id="status">disconnected</span></p>
<hr>
<p>Ultrasound sensor: <input id="ultrasound" type="text"></p>
<p>Infrared sensor: <input id="infrared" type="text"></p>
<p>Obstacle: <input id="obstacle" type="text"></p>
<hr>
<p>Joystick Axes: <span id="axes"></span></p>
<p>Joystick Buttons: <span id="buttons"></span></p>
<p>Velocity: <input id="velocity" type="text"></p>
<p>Omega: <input id="omega" type="text"></p>
<p>Left Wheel: <input id="lwheel" type="text"></p>
<p>Right Wheel: <input id="rwheel" type="text"></p>
<hr>
<p>Image over ros bridge: <input id="refresh_image" type="button" value="refresh">
<img id="image">
</p>
<hr>
<p>Image over http: <img id="jpeg"></p>
<hr>
<p>Detected object:
<textarea cols="100" rows="5" id="detected"></textarea>
</p>
<hr>
<p>Detected object (all):
<textarea cols="100" rows="5" id="detected_all"></textarea>
</p>
<hr>
</body>
</html>