CopterExpress/clover
1
0
Fork 0
mirror of https://github.com/CopterExpress/clover.git synced 2026-05-29 14:29:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

web: add simple topics viewer

Browse Source
This commit is contained in:
Oleg Kalachev
2021-07-07 06:29:23 +03:00
parent 802f8eeaa4
commit 9def866a30
3 changed files with 94 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
clover/www/index.html
View File

@@ -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>

67
clover/www/js/topics.js Normal file
View File

@@ -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);
}
}

26
clover/www/topics.html Normal file
View File

@@ -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>