GUI and Foxglove‐Extension - AD-EYE/AD-EYE_Core GitHub Wiki

User Interface GUI - Manual

This wiki page covers the usage of the AD-EYE user interface. We are developing TypeScript panels to control independent functionalities of a car, which we display in an application called Foxglove Studio.

To compile and display our panels, we create an "Extension" for Foxglove. The following tutorial is designed to help you manage this GUI

Initial Requirements

Install Foxglove Studio:
- Download: Foxglove Studio
- Install using snap:
```
sudo snap install foxglove-studio
```
Node.js 14+ is required:
- Currently, we are using Ubuntu 16 / Node.js v16.19.1 / npm 8.19.3.
Extension Development:
- Uses the npm package manager to install development dependencies and run build scripts.
- To install extension dependencies, run npm from the root of the extension package:
```
npm install
```
Install CSS Loaders:
- To work with CSS files, install the following loaders:
```
npm install --save-dev css-loader style-loader
```

Help: Shortcut to debug or see the console on Foxglove Studio: Ctrl+Shift+I

The Foxglove Studio Extension

Foxglove Studio allows developers to create extensions or custom code that is loaded and executed inside the Foxglove Studio application. This can be used to add custom panels. Extensions are authored in TypeScript using the @foxglove/studio SDK.

Create custom Panels

To build custom panels, such as domain-specific or project-specific panels, we need the Foxglove extension. For more details, refer to the Foxglove Panel API documentation.

Custom panels can:

Subscribe to messages on various topics.
Advertise and publish messages.
Display message information.

A ) Isolate Project-Specific Panels
- Upon installing Foxglove, default panels provided by @foxglove/studio-base are included for project use. However, in the latest version of Foxglove, the studio-base package has been deprecated.
```
 Foxglove-update
```
- Our project panels are also developed using studio-base, and there is currently no direct option to import them into foxglove-extension. Consequently, we must manually write all panels according to the logic and structure of foxglove-extension.
B ) Panel API
- The PanelAPI in studio-base has been replaced by PanelExtensionContext. It exposes properties and methods for writing, accessing a custom panel, and rendering UI updates. This context includes methods to subscribe to messages, receive updates, and configure the panel's settings.

C ) Publishing a Topic

To publish a topic, you need to advertise it first:

 advertise(topic: string, datatype: string, options?: Record<string, unknown>)

Use context.advertise to indicate the intent to publish a specific datatype on a topic. A panel must call context.advertise before being able to publish on the topic using context.publish. Options are specific to the data source.

 context.advertise("/my_image_topic", "sensor_msgs/Image");

Common datatype definitions are available in the @foxglove/rosmsg-msgs-common package. To use these, install the rosmsg-msgs-common package locally in your GUI directory:

 npm i @foxglove/rosmsg
 npm i @foxglove/rosmsg-msgs-common

Here's an example of how to use it in your code:

 import { ros1 } from "@foxglove/rosmsg-msgs-common";

 context.advertise?.(currentTopic, "sensor_msgs/Joy", {
   datatypes: new Map([
     ["std_msgs/Header", ros1["std_msgs/Header"]],
     ["std_msgs/Float32", ros1["std_msgs/Float32"]],
     ["std_msgs/Int32", ros1["std_msgs/Int32"]],
     ["sensor_msgs/Joy", ros1["sensor_msgs/Joy"]],
   ]),
 });

Build the panels

You can find the TypeScript panels of the GUI in /home/adeye/AD-EYE_GUI/src/panels.

To build and install the extension into your local Foxglove Studio desktop app, run:
```
npm run local-install
```
Open the Foxglove Studio desktop (or ctrl-R to refresh if it is already open). Your extension is installed and available within the app.
For simple testing, to visualize your modifications, you can use the Layout section of Foxglove (on the left side) and open the AD-EYE dashboard.

Testing

For proper testing, ensure you launch roscore or a local simulation launch file with roslaunch before opening Foxglove:

roscore

Package a new Extension

Extensions are packaged into .foxe files, which contain the metadata (package.json) and the build code for the extension.

Before packaging, ensure that the name, publisher, version, and description fields are correctly set in package.json. Once everything is configured, you can distribute the extension by running:

npm run package

This command will package the extension into a .foxe file in the local directory.

Instructions to Run the GUI on a Laptop

Step 1. Update your system:
```
sudo apt-get update
```
Step 2. Navigate to the GUI folder/repository and install Node.js version 16.19.1 :
```
nvm install v16.19.1
```
Step 3. Verify Node.js and npm versions :
- Check if both Node.js and npm are working and available in the system by running:
```
npm -v
node -v
```
- Ensure that the versions displayed are v8.19.3 for npm and v16.19.1 for Node.js.

Problems and Solutions

When you clone or pull this repository, you might encounter the following issues:

Issue 1: cannot find module for foxglove-extension Solution: Run the following command to install the missing module:

npm i create-foxglove-extension

Issue 2: while resolving: [email protected] npm err! found: @types/[email protected] Solution: If you encounter similar error messages related to packages like axios or react-google-maps, try removing the specific dependency from package.json and then reinstall the packages:

npm install

Issue 3: Could not find a declaration file for module: 'roslib'. Solution: Install roslib with:

npm install -D @types/roslib