Announcing ros-tool: The easiest way to create web UIs for ROS

General
, ,
1

Our new, free ros-tool capability makes it trivial to interact with ROS from the web. It provides a React API for subscribing and publish to topics and for placing service calls. It works with both ROS 1 and 2, and unlike rosbridge, it caches all data in the cloud, which means your UIs will work even when your robot is offline (just showing the latest data). Since all data is synced via the cloud, it is also much easier and more efficient to aggregate data from multiple robots, e.g., for showing your fleet on a map.

Example

Here is an example of how to use it on the web:

import { CapabilityContext, CapabilityContextProvider } from '@transitive-sdk/utils-web'

const MyROSComponent = () => {
  // import the API exposed by the ros-tool capability
  const { ready, subscribe, deviceData, publish, call } = useContext(CapabilityContext)

  useEffect(() => {
      if (ready) {
        // subscribe to a ROS 1 topic on the robot
        subscribe(1, '/amcl_pose');
      }
    }, [ready, subscribe])

  // get the pose from the reactively updating device data
  const pose = deviceData?.ros[1].messages?.amcl_pose?.pose.pose;
  if (!pose) return <div>Connecting..</div>;

  // Show pose x and y on page as text:
  return <div>
      x: {pose.position.x},
      y: {pose.position.y}
    </div>
}

const MyPage = () => <CapabilityContextProvider jwt={jwt}>
    <MyROSComponent />
  <CapabilityContextProvider>
>

Getting Started

The easiest way to get started with this is to use our hosted solution on transitiverobotics.com where you can create a (free) account, add your robots, and install the ros-tool capability. Then you can use the playground UI to try it out without writing any code. The playground UI shows you the list of topics on the robot and let’s you subscribe to them. For publishing messages and placing service calls it fetches the message/service schema and uses it to pre-populate an editor with a template where you can just edit the values and send it off.

And yes, Transitive is open-source, so if you prefer to self-host the service, you can.

Demo and Details

Watch the demo here.

13 Likes
2

I see this as a much needed product. There’s things like roslib which seem to use websockets to communicate with ros but yours is out of the box over the internet

Is this solution similar to what you’ve done with WebRTC to stream video data meaning that only the latest ros2 messages are utilized or are they sent chronologically which may end up causing increased latency for large messages

What message types are currently supported and how is it possible to implement custom message types

Thankyou

3

Thanks, @Hassan_Shahzad .

No, unlike the webrtc capabilities, this one uses MQTTSync (over mqtt, over TCP) to reliably synchronize data between robot, cloud, and web. It does this efficiently by only sending diffs, so it’s a lot more efficient than rosbridge + roslib, but it will not do any form of congestion control like WebRTC. So if you want to send images, then webrtc is definitely the better choice.

All message and services types installed on the robot are supported, and yes, it supports custom message types. See this section of the documentation: ROS Tool | Custom Message Types.

4

It’s very useful to us. Thanks.

1 Like
5

What is “MQTTSync”?
A google search for that did not turn up any clear winner for the term.

6

You are absolutely right. We need to create a standalone page for it so that Google can index it better. Here is the current documentation: high-level description + SDK functions.

7

For anyone interested in a longer explanation and a guided tour, I presented ros-tool at the Cloud Robotics WG meeting last week and the recording is now available here: rostool Demo and Explanation – Cloud Robotics Working Group 2024-07-29 on Vimeo

5 Likes
8

Hello and good day to you. I’m looking for Ros 2 web ui that looks similar to this,

Ros2WebGUI_sketch
Ros2WebGUI_sketch1800Ă—1400 115 KB

1 Like
9

“Looking for” as in you want to build something like this? If so, yes, you can do this using ros-tool. Once you’ve created an account on transitiverobotics.com (or set up your own self-hosted deployment) you can:

  1. add a robot to your account,
  2. install the ROS Tool capability on it, and then
  3. start writing your React code for this UI to:
    • use ros-tool to subscribe to /map to get the map data including all updates
    • use react-leaflet to draw the map
    • add buttons to your UI to control your robot, and
    • when those buttons are pressed, use ros-tool to publish cmd_vel messages to your robot,
    • when someone clicks on the map, you could use ros-tool to publish a nav goal on your robot.

If you want a more robust and safe remote teleop capability that also streams your robot’s cameras to your mobile UI, you can take a look at Remote Teleop | Transitive Robotics

Note that unlike what’s suggested in the picture, this will work over the Internet, too, not just locally.