Notebook integration¶

Functions and classes for integrating with Jupyter notebooks and creating interactive visualizations.

For setup instructions and examples, visit the Jupyter notebook integration docs.

Note

The notebook integration classes and functions are only available when the notebook extra package is installed. Install it with pip install foxglove-sdk[notebook].

foxglove.init_notebook_buffer(context=None)¶

Create a NotebookBuffer object to manage data buffering and visualization in Jupyter notebooks.

The NotebookBuffer object will buffer all data logged to the provided context. When you are ready to visualize the data, you can call the show() method to display an embedded Foxglove visualization widget. The widget provides a fully-featured Foxglove interface directly within your Jupyter notebook, allowing you to explore multi-modal robotics data including 3D scenes, plots, images, and more.

Parameters:: context (Context | None (default: None)) – The Context used to log the messages. If no Context is provided, the global context will be used. Logged messages will be buffered.
Return type:: NotebookBuffer
Returns:: A NotebookBuffer object that can be used to manage the data buffering and visualization.
Raises:: Exception – If the notebook extra package is not installed. Install it with pip install foxglove-sdk[notebook].
Note:: This function is only available when the notebook extra package is installed. Install it with pip install foxglove-sdk[notebook].

Example:

import foxglove

# Create a basic viewer using the default context
nb_buffer = foxglove.init_notebook_buffer()

# Or use a specific context
nb_buffer = foxglove.init_notebook_buffer(context=my_ctx)

# ... log data as usual ...

# Display the widget in the notebook
nb_buffer.show()

class foxglove.notebook.notebook_buffer.NotebookBuffer¶

A data buffer to collect and manage messages and visualization in Jupyter notebooks.

The NotebookBuffer object will buffer all data logged to the provided context. When you are ready to visualize the data, you can call the show() method to display an embedded Foxglove visualization widget. The widget provides a fully-featured Foxglove interface directly within your Jupyter notebook, allowing you to explore multi-modal robotics data including 3D scenes, plots, images, and more.

clear()¶

Clear the buffered data.

Return type:: None

show(*, width=None, height=None, src=None, layout=None, opaque_layout=None)¶

Show the Foxglove viewer. Call this method as the last step of a notebook cell to display the viewer.

Parameters:: layout (Layout | None (default: None)) – An optional Layout to use as the initial layout for the viewer.
Return type:: FoxgloveWidget

class foxglove.notebook.foxglove_widget.FoxgloveWidget¶

A widget that displays a Foxglove viewer in a notebook.

refresh()¶

Refresh the widget by getting the data from the callback function and sending it to the widget.

Return type:: None

Layouts¶

This module defines types for programmatically constructing Foxglove layouts.

class foxglove.layouts.BasePanel¶: Abstract base class for all panels. This class cannot be instantiated directly. Use one of the provided subclasses instead, or Panel for a custom panel.

class foxglove.layouts.Layout¶

A Foxglove layout, which describes the arrangement of panels and their configuration.

Example¶

import foxglove.layouts as fl

layout = fl.Layout(
    content=fl.SplitContainer(
        direction="row",
        items=[
            fl.SplitItem(
                proportion=2,
                content=fl.PlotPanel(
                    config=fl.PlotConfig(
                        paths=[fl.PlotSeries(value="/data.position")],
                    ),
                ),
            ),
            fl.SplitItem(
                proportion=1,
                content=fl.VariableSliderPanel(
                    config=fl.VariableSliderConfig(
                        global_variable_name="my_var",
                    ),
                ),
            ),
        ],
    ),
    variables={"my_var": 4},
)

content: BasePanel | TabContainer | StackContainer | SplitContainer¶

user_scripts: dict[str, UserScript] | None = None¶

variables: dict[str, bool | float | str | list[bool | float | str | list[VariableValue] | dict[str, VariableValue]] | dict[str, bool | float | str | list[VariableValue] | dict[str, VariableValue]]] | None = None¶

class foxglove.layouts.Panel¶

A schema for a generic panel; can be used as a fallback for panels that are not yet supported.

Example¶

import foxglove.layouts as fl

# Generic panel for custom or extension panels
layout = fl.Layout(
    content=fl.Panel(
        panel_type="com.example.CustomPanel",
        config={"setting1": "value1", "setting2": 42},
        version=1,
        title="My Custom Panel",
    ),
)

config: dict[str, Any] | None = None¶

panel_type: str¶: A unique identifier for the panel type.

title: str | None = None¶: The title of the panel.

version: int¶: The version of the panel config schema.

class foxglove.layouts.SplitContainer¶

A sequence of items displayed in a vertical or horizontal direction. Items are placed one next to the other (or one above the other for vertical direction), with space allocated according to their ratios.

Example¶

import foxglove.layouts as fl

layout = fl.Layout(
    content=fl.SplitContainer(
        direction="row",
        items=[
            fl.SplitItem(proportion=2, content=fl.ThreeDeePanel()),
            fl.SplitItem(proportion=1, content=fl.ImagePanel()),
        ],
    ),
)

direction: Literal['row', 'column'] = 'row'¶: The direction in which items are displayed in the list. Defaults to row.

items: list[SplitItem]¶: The items to display in the split container.

class foxglove.layouts.SplitItem¶

An item in a split container with a proportion for space allocation.

content: BasePanel | TabContainer | StackContainer | SplitContainer¶

proportion: float = 1¶: Proportion of space this item occupies relative to other items in the split. The actual space allocated is calculated by dividing this item’s proportion by the sum of all proportions in the split. The proportion must be greater than 0. Defaults to 1.

class foxglove.layouts.StackContainer¶

A container for a vertically-scrollable stack of panels.

Example¶

import foxglove.layouts as fl

layout = fl.Layout(
    content=fl.StackContainer(
        panels=[
            fl.StackItem(panel=fl.LogPanel(), size=0.6),
            fl.StackItem(panel=fl.TablePanel(), size=0.4),
        ],
        title="Logs and Data",
    ),
)

panels: list[StackItem]¶: The panels to display in the stack.

title: str | None = None¶: The title of the stack.

class foxglove.layouts.StackItem¶

An item in the stack, includes the panel and the height of the item.

panel: BasePanel¶

size: float¶: Size is a number greater than 0 that represents a proportion of the height of the stack container; e.g., 0.5 is 50% of the height of the stack container, and 1 is 100% of the height of it.

class foxglove.layouts.TabContainer¶

A container for quickly switching between different groups of panels using a tab bar.

Example¶

import foxglove.layouts as fl

layout = fl.Layout(
    content=fl.TabContainer(
        tabs=[
            fl.TabItem(title="Plot View", content=fl.PlotPanel()),
            fl.TabItem(title="Image View", content=fl.ImagePanel()),
        ],
        selected_tab_index=0,
    ),
)

selected_tab_index: int = 0¶: The 0-based index of the tab that is selected. Defaults to 0.

tabs: list[TabItem]¶: The tabs to display in the container.

class foxglove.layouts.TabItem¶

A single tab in a tab container.

content: BasePanel | TabContainer | StackContainer | SplitContainer¶

title: str¶: The title of the tab.

class foxglove.layouts.UserScript¶

A user script saved in a layout.

Example¶

import foxglove.layouts as fl

layout = fl.Layout(
    content=fl.UserScriptsPanel(
      config=fl.UserScriptsConfig(
        selected_node_id="script1",
      ),
    ),
    user_scripts={
        "script1": fl.UserScript(
            name="Hello World",
            source_code='''
// The ./types.ts module provides helper types for your Input events and messages.
import { Input, Message } from "./types.ts";

// Your script can output well-known message types, any of your custom message types, or
// complete custom message types.
//
// Use `Message` to access types from the schemas defined in your data source:
// type Twist = Message<"geometry_msgs/Twist">;
//
// Import from the @foxglove/schemas package to use foxglove schema types:
// import { Pose, LocationFix } from "@foxglove/schemas";
//
// Conventionally, it's common to make a _type alias_ for your script's output type
// and use that type name as the return type for your script function.
// Here we've called the type `Output` but you can pick any type name.
type Output = {
  hello: string;
};

// These are the topics your script "subscribes" to. Foxglove will invoke your script function
// when any message is received on one of these topics.
export const inputs = ["/input/topic"];

// Any output your script produces is "published" to this topic. Published messages are only visible within Foxglove, not to your original data source.
export const output = "/foxglove_script/output_topic";

// This function is called with messages from your input topics.
// The first argument is an event with the topic, receive time, and message.
// Use the `Input<...>` helper to get the correct event type for your input topic messages.
export default function script(event: Input<"/input/topic">): Output {
  return {
    hello: "world!",
  };
};
''',
        ),
    },
)

name: str¶: The name of the user script.

source_code: str¶: The source code of the user script.

Notebook integration¶

Layouts¶

Panels¶

Foxglove SDK

Navigation

Related Topics