Setup

Download the program file for foxglove https://foxglove.dev/download
Install Foxglove studio: Open a terminal where you downloaded the file and install the version of the file you downloaded (replace the * by your version)

sudo apt install ./foxglove-studio-*.deb

To update the version when it is installed :

sudo apt update
sudo apt install foxglove-studio

3a. Install Beautifulsoup4 for python

pip install beautifulsoup4

3b. Install Beautifulsoup4 for python

pip install -U pip setuptools wheel
pip install launchpadlib
pip install ruamel.yaml

Clone the repo of foxglove

mkdir ~/foxglove
cd ~/foxglove
git clone https://github.com/EPFLRocketTeam/foxglove.git

Add the extension

mkdir -p ~/.foxglove-studio/extensions
cp ~/foxglove/foxglove/foxglove_extension_1.0.1.foxe ~/.foxglove-studio/extensions/foxglove_extension_1.0.1.foxe

Go to ~/.foxglove-studio/extensions and extract the file (right click -> Extract here)
If real_time_simulator doesn't have a /log folder

cd ~/catkin_ws/src/real_time_simulator/
mkdir log

Launch foxglove (No need to connect to ROS)
In the Layouts tab (second from the top on the left), Click on the file "Import layout" and import the Simulator.json layout that is in the /home/foxglove/foxglove/layouts folder
In foxglove, at the bottom left, there is a Preference tab with a screw icon. Click on it and change the ROS_PACKAGE_PATH value with your path to the ROS src : ex. /home/user/catkin_ws/src
Close Foxglove studio
You can now launch the simulator by executing the startup.sh script in real_time_simulator

cd ~/catkin_ws
./src/real_time_simulator/bash_scripts/startup.sh

Note: In the simulator, only the launchFiles containing "rocket" will be displayed

Develop an extension

You have a tutorial on how to create an extension for foxglove here https://foxglove.dev/docs/studio/extensions/getting-started

You will need to install Node.js 14+ and Yarn if you don't already have them

You will need to create a directory that will contain your extensions,

Build project

To build the project, you need to go into your extension folder and execute one of the following commands :

This command builds the project but the changes are not visible in foxglove. It tells you if you have syntax errors.

yarn build

This command builds the project and pushes the changes to foxglove. To see the changes, you have to restart foxglove.

yarn local-install

How to communicate with ROS (dev only)

You can find more infos at this link.

Publish on a topic

To advertise on a topic using basic message type :

context.advertise?.("/topic", "std_msgs/String", {
      datatypes: new Map(
        Object.entries({
          "std_msgs/String": { definitions: [{ name: "data", type: "string" }] },
        }),
      ),
    });

and then publish :

context.publish?.("/topic", { data: 'value' });

To use custom message types, the second argument is {package}/{TypeName}.

ex:

// Advertise update topic
    context.advertise?.("/updateTopic", "real_time_simulator/Update", {
      datatypes: new Map(
        Object.entries({
          "real_time_simulator/Update": {definitions: [
            { type: "string", name: "config"},
            { type: "string", name: "parameter"},
            { type: "string", name: "value"},
        ]}
        }),
      ),
    });

Subscribe to a topic

To subscribe to a topic and get the messages, you first need to say that you want your layout to update every time you get a message on a topic using this line inside the useLayoutEffect block:

context.watch("currentFrame");

Then, you need to subscribe to the topics using this line :

context.subscribe(["/topic1", "/topic2", ...]);

Calling subscribe with no topics will unsubscribe from all topics.

After that, all messages from all topics subsribed that are recieved will be availaibe during one refresh in this variable :

renderState.currentFrame