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

To build a custom panel i.e. domain-specific panels/project-specific panels, we need foxglove extension.

https://docs.foxglove.dev/docs/visualization/extensions/api/panel-api

Custom panels can:

  1. Subscribe to message on various topics
  2. advertise and publish
  3. Display the message information.

Writing an extension:

Requirement:

  1. Install foxglove-studio: https://foxglove.dev/download sudo snap install foxglove-studio

  2. Node.js 14+, Currently we are using Ubuntu 16, Node.js v16.19.1, npm 8.19.3

Installed css-loader and style-loader in order to work with css file###

npm install --save-dev css-loader

npm install --save-dev style-loader

Shortcut to debug or see console on foxglove studio: Ctrl+Shift+I

####Isolate our project-specific panels from the default panels in foxglove studio: Upon installing foxglove, default panels provided by @foxglove/studio-base are included for project use. However, in the latest Foxglove version, 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 in accordance with the logic and structure of foxglove-extension.

###PanelAPI PanelAPI in studio-base has been replace by PanelExtensionContext, it exposes/contains properties and methods for writing/accessing a custom panel and rendering UI updates. This context has methods to subscribe for messages, receive updates, configure the panel’s settings.

To publish the topic, we need to advertise first:

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

Use context.advertise to indicate an intent to publish a specific datatype on a topic. A panel must call context.advertise before being able to publish on the topic (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

So we need to install the rosmsg-msgs-common package locally in our GUI directory: https://www.npmjs.com/search?q=%40foxglove

npm i @foxglove/rosmsg

npm i @foxglove/rosmsg-msgs-common

‌ 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"]], ]), });