Try foxglove

[Jelmerdw]

Foxglove

Foxglove seems to be the 'industry standard' tool to control and visualize robots in a web interface, allowing to connect remotely over the inter. Also, no real alternatives with similar features (visualization of the robot, camera, lidar, markers, joystick control and more) seems to be available. Therefore we try to integrate Foxglove.

How does it work?

In this PR, the visualization image starts the Foxglove bridge. Based on the robot configuration, the correct topics are added to the client_topic_whitelist parameter. Based on the robot configurations, also a foxglove.json layout file is written (only works of you create this file before launching, since it works via a Docker volume mount). The data can be visualized in Foxglove Studio or in a Chrome browser at https://app.foxglove.dev/. Here you can import the JSON file for the layout.

Tailscale

To use Foxglove for remote monitoring over the internet, we use Tailscale. Simply change the localhost in the Foxglove connection to the Tailscale IP adress of the device running the Foxglove Bridge.

Problems:

Foxglove works well when the bridge and app are running on the same network. Over the internet, we experience issues:

1. Mesh files:

The mesh files of the robot are sometimes not (all) loaded. For this PR, we tried to reduce the mesh size by:

Converting the meshes (DAE and STL) to GLB (small binary format).
This was done using 3d-convert-py. This tool has a dependency `bpy==3.6.0' (blender python), which is not available anymore on PyPi and requires Python 3.10. Therefore, the easiest way to use this tool is:

1. Create a virtual environment with Python 3.10: uv venv --python 3.10
2. Install bpy: uv pip install bpy==3.6.0 --extra-index-url https://download.blender.org/pypi/
3. Install other requirements: uv pip install -r requirements.txt
4. Use the tool to convert mesh files to glb (how-to)

Compressing the GLB file
This was done using glTF-Transform. This tool requires NPM to install:

1. Install npm (using nodejs): https://nodejs.org/en/download
2. Install glTF-Transform: npm install --global @gltf-transform/cli
3. Compress glb file: gltf-transform optimize input.glb output.glb --compress draco

Replacing the mesh files
This PR tries to replace the original mesh files with the (way smaller) glb files. Currently, this is simply done when loading the URDF using the new change_meshes() method. This is only a quick test, since the replacement of these meshes leads to incorrect orientated meshes in Gazebo en MoveIt. However, the smaller meshes seem to have a positive effect on Foxglove, since the meshes do load now.

2. Data compression.

Another problem when using Foxglove over the internet (via Tailscale) is that a camera stream or pointcloud stream is not working well. The visualization is laggy or doesn't work at all. The reason might be the lack of data compression.

For now, we decided to use Rosboard (#394). However, Foxglove has the potential to be the all-in-one tool (where we now use Rviz, Vizanti, Rosboard and our own GUI). Future investigation in fixing these problems with Foxglove might me interesting.