We heard you were looking for the ultimate robotics remote...

We are happy to announce that we’re launching the foxglove-studio snap, to help millions of Linux users install Foxglove Studio with a single terminal command.

Snaps are app packages that make it easy to securely install applications without worrying about dependencies
or compatibility with your particular Linux distribution. You can discover snaps to install by browsing
the Snap Store.

In addition to being available via the Snap Store, snaps for future Foxglove Studio releases
will now be included in our weekly release assets.

To get started, install the Foxglove Studio desktop
app:



Launch the app either from your application launcher or the command line:



Read Ubuntu’s own announcement or check out the foxglove-studio snap page for more details. You can also join our Slack community to give feedback or ask questions about this new installation option.


This post is an introduction to using Rosbridge with ROS 1 and JavaScript. If you're working on a ROS 2 robot, check out our blog post Using Rosbridge with ROS 2. For information on how to use Rosbridge with Foxglove, check out our docs.

If you've decided to build a robot using ROS (Robot Operating System), you now have easy access to a wide range of open source libraries, developer tools, and device drivers to support every step of your robotics development journey. Included in this rich ecosystem is Rosbridge, an easy way for you to interact with your robot and its data from a web page.

In this tutorial, we'll cover what exactly Rosbridge offers, and how to start using it with your own ROS 1 projects. By the end, we'll have created a web page that can listen to messages published by your ROS stack.

Why Rosbridge?

Web browsers have spent decades making it easier to build and distribute interfaces that are easy to use, lightning-fast, and available cross-platform. Unfortunately, ROS nodes communicate with each other via TCP/UDP sockets, which are not available in web browsers.

Rosbridge fills this gap by providing the connection between your robot and web browser using WebSockets, which are supported in every modern web browser. It exposes the pub/sub functionality of ROS, so that you can publish and subscribe to topics from your web page.

Create a web page that listens to your ROS stack

First, we'll build a web page that communicates across a Rosbridge connection to do two things:

Listen for the Rosbridge connection, and display its status on the page

Listen to a specific ROS topic, and list its published messages on the page

We'll be using roslibjs to handle our web page's Rosbridge communications.

Create a basic HTML file titled index.html:



Open this file in your browser:

blank page

Now, let's update our page with the status of the Rosbridge connection:



Finally, we'll listen to a topic and display its received messages on the page:



Run your Rosbridge server

Now that we've written all the code we need for our web page to show meaningful information from our ROS stack, let's test it all out.

For the purposes of this tutorial, we'll assume you already have ROS 1 installed on your computer. Let's start by installing the \[rosbridge\_server]\(http\://wiki.ros.org/rosbridge\_server) package:



Next, you may have to source your development environment:



To launch the Rosbridge WebSocket server, run the launch file included with the Rosbridge install:



Refresh your web page to reconnect to the robot, and verify that your index.html file now shows "Connection: successful":

with Rosbridge status

In a Terminal window, publish a message to /my\_topic:



You'll see that the page now shows the latest /my\_topic message received:

with received message

Publishing more /my\_topic messages with different data will add their text to this growing list.

You've successfully subscribed to and received messages from a Rosbridge WebSocket server! While this tutorial covered an extremely simple example, Rosbridge connections make it possible for more complex web-based tools (like Foxglove Studio) to connect to your live robotics data.

Keep learning

Rosbridge can be a useful tool for accelerating your robotics development. It brings the advantages of the web to the robotics world, helping us build zero-install user interfaces that anyone can use.

With Rosbridge, the possibilities are endless. Instead of having every teammate install the complex development environment that working with ROS usually requires, you can now use developer tools, create operator dashboards, and share data insights across your organization - all with a simple web page.



You can find all code referenced in this tutorial in our foxglove/rosbridge-demo repo. You can also experiment with connecting to your ROS robot via a hosted version of this demo .

Foxglove Studio is an example of a web-based application that uses a Rosbridge connection to connect to your live ROS data. Open up Studio to build a real-time dashboard that visualizes and debugs your data – all from the comfort of your favorite web browser.


If you're using ROS 1, check out The Building Blocks of ROS 1 instead.

Note: ROS 2 has integrated several packages described in this post (e.g. rqt\_console, rqt\_graph, rqt\_plot, etc.) as plugins in the rqt meta-package. For the purposes of this post (i.e. covering different features in discrete steps), we've opted to call out the individual packages in the CLI commands (e.g. ros2 run rqt\_graph rqt\_graph vs. rqt). Check out the rqt docs for more information.

If you’ve kept up-to-date on tech’s latest robotics projects or tinkered around with your own robot kit, you’ve probably come across mentions of ROS 2.

At its core, the Robot Operating System (ROS) is an open source software suite built to simplify robotics development. It provides a collection of tools that runs everything from low-level device control, hardware abstractions, and package management. Due to its distributed design, users can pick and choose what parts of ROS to integrate into their own projects.

ROS was born in 2007, out of roboticists’ desire to more easily share resources and build upon each other’s work. These experts experienced firsthand how difficult it was building software for an increasingly diverse array of robots across a variety of platforms, and realized that no one person was equipped to tackle the field’s challenges alone. They hoped a deliberately modular framework like ROS would foster more collaborative robotics development and encourage code reuse among the community’s brightest minds.

The ROS 2 Project emerged around 2015, when ROS 1's commercial shortcomings were becoming ever more apparent. By leveraging what was great about ROS 1 and improving what wasn't, ROS 2 contributors began evolving the framework to incorporate new use cases and technologies and to address the real-world challenges roboticists were facing.

Nearly 15 years after its conception, the ROS ecosystem now consists of tens of thousands of users worldwide, with applications ranging from COVID-19 disinfection robots to humanoid robotic hands. Its members have contributed cutting-edge libraries like map generation systems, navigation tools, and computer vision utilities, ensuring ROS’s continued relevance in the robotics world.

Basic concepts

ROS is a distributed framework of self-contained processes, or nodes, that discover and communicate with each other at runtime. Any given robot can have multiple nodes, each of which owns a subset of the robot’s tasks – one node may keep track of the robot’s velocity, another its steering angle, and still another its camera feed. All nodes communicate with each other via DDS (Data Distribution Service), a middleware protocol that drives a distributed architecture and allows nodes to discover each other.

Nodes communicate with each other by publishing or subscribing to messages on different channels of information, called topics. In this way, we can separate concerns into their respective nodes, while still empowering the robot to make complex decisions to execute a task. Nodes can be grouped into packages, which can then be easily shared and distributed among ROS users.

ROS nodes

Messages for a topic adhere to a fixed schema, called a message type. For example, one topic can contain messages with just position coordinates (geometry\_msgs/msg/Point), another lidar point cloud data (sensor\_msgs/msg/PointCloud), and still another text logs (std\_msgs/msg/String).

A message type is defined via multiple fields, each with a specified type. For example, the geometry\_msgs/msg/Pose message type consists of a position and orientation field, each of which have their own message type definitions:

message types

In summary, if nodes are like walkie-talkies that can communicate with each other, then topics are the channels that they broadcast audio on, and messages are the words that travel across these channels. In the same way that certain walkie-talkie channels are reserved for specific types of communication, each ROS topic is also reserved for messages that adhere to a specific type.

Useful commands

To get started using ROS, you will need to install it on your machine – ROS 2 provides installation instructions for Ubuntu, Windows, and macOS.

Use ros2 run to run nodes contained in various ROS packages.

For example, ros2 run turtlesim turtlesim\_node will find the turtlesim ROS package and run its turtlesim\_node to bring up a simulation of swimming turtles on your desktop. Running ros2 run rqt\_graph rqt\_graph will run that package’s rqt\_graph node to render a graph of your nodes connected by their publications and subscriptions.

Once you have a few nodes from different packages running, use ros2 node to display information about your currently active nodes.

ros2 node list – Lists current nodes.

ros2 node info /your\_node\_name – Provides more information about a given node, including publications and subscriptions.

Once you have several nodes running, use ros2 topic to fetch information for any published topic.

ros2 topic echo /your\_topic – Displays messages published to a given topic.

ros2 topic list – Prints information about active topics.

ros2 topic type /your\_topic – Returns the message type for a topic.

ros2 topic pub /your\_topic geometry\_msgs/msg/Point \[args] – Publishes data to a given topic with a specified message type.

Finally, use ros2 interface to inspect messages and their types in more detail.

ros2 interface list – Lists all message types.

ros2 interface show geometry\_msgs/msg/Point – Displays the fields for a given message type.

Useful packages

Given how extensive the ROS environment is, it is easy to get overwhelmed by the selection of available packages. Here are a few popular data visualization packages that you can get started with:

rviz – Provides a 3D visualizer for ROS messages.

rqt\_console – Provides a GUI for displaying and filtering ROS messages.

rqt\_graph – Visualizes the ROS computation graph – i.e. nodes and the topics they publish and subscribe to.

rqt\_image\_view – Displays camera images using image\_transport.

rqt\_plot – Plots numeric values on a 2D chart.

How Foxglove Studio fits in

While the ROS ecosystem offers an impressive array of features and services, it can be overwhelming to find, install, and run them all at once. ROS is also tightly bound to specific versions of Ubuntu, which introduces significant overhead for users interested in quickly viewing their data.

Studio has integrated many of ROS's visualization and debugging tools into one cross-platform desktop application, so that instead of memorizing package names and CLI commands, you can simply drag and drop a panel from our menu into your layout to start seeing results. For example, we've incorporated features similar to rqt\_console, rqt\_graph, rqt\_image\_view, and rqt\_plot, into our Raw Messages, Topic Graph, Image, and Plot panels, respectively. Check out our docs for a list of commonly used developer tools that we've integrated into the Studio app.

Studio further streamlines visualization and debugging workflows by allowing users to load .db3 files directly into the app – you no longer need to run ros2 run and ros2 bag in multiple terminals every time you want to inspect your data.

Studio panels vs ROS tools

Studio also supports user contributions to an extensions library, so you can build your own project-specific panels to customize your robotics development workflows.

To learn more about how Foxglove Studio can accelerate your robotics development, feel free to check out our docs or reach out to us directly in our Slack community.


The Building Blocks of ROS 2

Read more:

Ready to get started?Download today on Linux, Windows, or macOS.