From 9def866a3063f93b3f92b26e3bfb53684919c977 Mon Sep 17 00:00:00 2001
From: Oleg Kalachev <okalachev@gmail.com>
Date: Wed, 7 Jul 2021 06:29:23 +0300
Subject: [PATCH] web: add simple topics viewer

---
 clover/www/index.html   |  1 +
 clover/www/js/topics.js | 67 +++++++++++++++++++++++++++++++++++++++++
 clover/www/topics.html  | 26 ++++++++++++++++
 3 files changed, 94 insertions(+)
 create mode 100644 clover/www/js/topics.js
 create mode 100644 clover/www/topics.html
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 @@
 
 <ul>
 	<li><a href="docs">View documentation</a> (snapshot of <a href="https://clover.coex.tech">clover.coex.tech</a>)</li>
+	<li><a href="topics.html">View topics</a></li>
 	<li><a href="" id="wvs">View image topics</a> (<code>web_video_server</code>)</li>
 	<li><a href="" id="butterfly">Open web terminal</a> (<code>Butterfly</code>)</li>
 	<li><a href="viz.html">View 3D visualization</a> (<code>ros3djs</code>)</li>
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 `<li><a href="${url}" class=topic title=${type}>${topic}</a> &#x1F5BC;</li>`;
+			} else {
+				return `<li><a href="?topic=${topic}" class=topic title=${type}>${topic}</a></li>`;
+			}
+		}).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} <a id="topic-type" href=${href} target="_blank">${typeStr}</a>`;
+	});
+
+	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 @@
+<html lang="en">
+	<head>
+		<title>ROS topics</title>
+		<script src="js/roslib.js"></script>
+		<link rel="icon" href="data:,"> <!-- make chrome don't request icon -->
+		<script type="module" src="js/topics.js"></script>
+		<style>
+			#topics { line-height: 1.2em; }
+			#topic-view {
+				display: none;
+			}
+			#topic-message {
+				display: none;
+				white-space: pre;
+				font-family: monospace;
+			}
+			#topic-type { font-family: monospace; font-size: 0.5em; vertical-align: super; font-weight: normal; }
+			.topic { font-family: monospace; }
+		</style>
+	</head>
+	<body>
+		<h1>&nbsp;</h1>
+		<ul id="topics"></ul>
+		<code id="topic-message" title="Hold mouse button to pause">No messages received</code>
+	</body>
+</html>
