diff --git a/clover/www/index.html b/clover/www/index.html
index f5f9214f..b6faa6b0 100644
--- a/clover/www/index.html
+++ b/clover/www/index.html
@@ -4,6 +4,7 @@
- View documentation (snapshot of clover.coex.tech)
+ - View topics
- View image topics (
web_video_server)
- Open web terminal (
Butterfly)
- View 3D visualization (
ros3djs)
diff --git a/clover/www/js/topics.js b/clover/www/js/topics.js
new file mode 100644
index 00000000..f9d588eb
--- /dev/null
+++ b/clover/www/js/topics.js
@@ -0,0 +1,67 @@
+const url = 'ws://' + location.hostname + ':9090';
+const ros = new ROSLIB.Ros({ url: url });
+
+ros.on('connection', function () {
+ document.body.classList.add('connected');
+ init();
+});
+
+ros.on('close', function () {
+ document.body.classList.remove('connected');
+ setTimeout(function() {
+ // reconnect
+ ros.connect(url);
+ }, 2000);
+});
+
+const title = document.querySelector('h1');
+const topicsList = document.querySelector('#topics');
+const topicMessage = document.querySelector('#topic-message');
+
+function viewTopicsList() {
+ title.innerHTML = 'Topics:';
+
+ ros.getTopics(function(topics) {
+ topicsList.innerHTML = topics.topics.map(function(topic, i) {
+ const type = topics.types[i];
+ if (type == 'sensor_msgs/Image') {
+ let url = `${location.protocol}//${location.hostname}:8080/stream_viewer?topic=${topic}`;
+ return `- ${topic} 🖼
`;
+ } else {
+ return `- ${topic}
`;
+ }
+ }).join('');
+ });
+}
+
+function viewTopic(topic) {
+ title.innerHTML = topic;
+ topicMessage.style.display = 'block';
+
+ ros.getTopicType(topic, function(typeStr) {
+ const [pack, type] = typeStr.split('/');
+ let href = `https://docs.ros.org/en/noetic/api/${pack}/html/msg/${type}.html`; // FIXME: determine distro
+ title.innerHTML = `${topic} ${typeStr}`;
+ });
+
+ new ROSLIB.Topic({ ros: ros, name: topic }).subscribe(function(msg) {
+ document.title = topic;
+ if (mouseDown) return;
+ topicMessage.innerHTML = JSON.stringify(msg, null, 4);
+ });
+}
+
+let mouseDown;
+
+topicMessage.addEventListener('mousedown', function() { mouseDown = true; });
+topicMessage.addEventListener('mouseup', function() { mouseDown = false; });
+
+function init() {
+ const params = Object.fromEntries(new URLSearchParams(window.location.search).entries());
+
+ if (!params.topic) {
+ viewTopicsList();
+ } else {
+ viewTopic(params.topic);
+ }
+}
diff --git a/clover/www/topics.html b/clover/www/topics.html
new file mode 100644
index 00000000..a8d9838c
--- /dev/null
+++ b/clover/www/topics.html
@@ -0,0 +1,26 @@
+
+
+ ROS topics
+
+
+
+
+
+
+
+
+ No messages received
+
+