Skip to content

WebViz visualization

Webviz is a web-based visualization tool, meaning you can access it through a browser/APP without the need to install additional software. This comes in handy for remote access and team collaboration.

Foxglove is an open-source toolkit that includes both online and offline versions. Designed to simplify the development and commissioning of robotic systems. It offers a range of features for building bot applications.

This section describes how to use Foxglove for data viewing and topic communication.

Hint

The operating environment and software and hardware configurations are as follows:

  • OriginBot robot(Visual Version/Navigation Version)
  • PC:Ubuntu (≥20.04) / Windows (>=10)

Software Installation

It is recommended to use the APP version here, which can be used without logging in to the account, and clicking on the download link can jump to the download page.

image-1700719266973

Follow the instructions to complete the download.

Environment setup

To connect OriginBot to Foxglove, you need to build a ROS environment on OriginBot.

#Install rosbridge. The purpose of using galactic here is to avoid conflict with tros and not affect the communication effect.
$ sudo apt install ros-galactic-rosbridge-suite

After the installation is complete, you can run the following command to enable the remote service of OriginBot:

$ source /opt/ros/galactic/setup.bash
$ ros2 launch rosbridge_server rosbridge_websocket_launch.xml

image-1700720022222

At the same time, open a new terminal, record the current IP address with ifconfig, and start the camera to publish image information for verification effect.

$ ifconfig&&ros2 launch originbot_bringup camera.launch.py

Foxglove interface visualization

After installing Foxglove, click on the software to see the following interface.

image-1700719347869

Click here to open the connection, enter the IP address, and the connection can be completed.

image-1700719435746

After the connection is successful, you can use Foxglove in a variety of ways, and in the + in the upper left corner, you can use various plug-ins of the software to assist you in development.

image-1700720501265

Select one of the images to see the image information we opened on OriginBot at the beginning, and select different topics to display the image.

image-d57ad61d81c4dd582d6ca0589327fdd

Foxglove posting the topic

In addition to displaying topics and information, you can also use Foxglove to post topic information, such as common cmd_vel.

Click "+" and select Publish, you can see the following interface, where you can set the topic, format and content you want to publish, which are synchronized with OriginBot.

image-1700720898863

In addition, there are some portable components available.

image-1700721076148

Official website API documentation: https://docs.foxglove.dev/docs/introduction

foxglove open source repository: https://github.com/foxglove/ros-foxglove-bridge

Record a topic and play back the data:https://developer.horizon.cc/documents_tros/quick_demo/demo_render?_highlight=foxg#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9-3

图片1