Skip to main content

Image

Display raw and compressed images, as well as compressed videos, with 2D annotations like text labels, circles, and points. Superimpose 3D markers for additional context.

image panel

Supported encodings

Raw imagesCompressed imagesCompressed videos
8UC1webph264
8UC3jpeg
16UC1jpg
32FC1png
bayer_bggr8
bayer_gbrg8
bayer_grbg8
bayer_rggb8
bgr8
bgra8
mono8
mono16
rgb8
rgba8
uyvy or yuv422
yuyv or yuv422_yuy2

Supported messages

To use this panel, your data source must provide messages conforming to 3D marker message types or one of the following supported schemas.

RawImage

frameworkschema
ROS 1sensor_msgs/Image
ROS 2sensor_msgs/msg/Image
Customfoxglove.RawImage

CompressedImage

frameworkschema
ROS 1sensor_msgs/CompressedImage
ROS 2sensor_msgs/msg/CompressedImage
Customfoxglove.CompressedImage

CompressedVideo

Record H.264 data using the Annex B format, avoiding B frames.

frameworkschema
Customfoxglove.CompressedVideo

CameraCalibration

Provide optional camera calibration data to render 3D entities in the Image panel, or render images in the 3D panel. Calibration data is not required to display ImageAnnotations since they use pixel coordinates.

Foxglove supports distortion models plumb_bob and rational_polynomial.

frameworkschema
ROS 1sensor_msgs/CameraInfo
ROS 2sensor_msgs/msg/CameraInfo
Customfoxglove.CameraCalibration

ImageAnnotation

frameworkschema
ROS 1visualization_msgs/ImageMarker
ROS 2visualization_msgs/msg/ImageMarker

ImageAnnotations

frameworkschema
ROS 1foxglove_msgs/ImageMarkerArray
Customfoxglove.ImageAnnotations

Settings

General

fielddescription
TopicCamera image or video topic to display
CalibrationCalibration topic to use for distortion and 3D markers
Sync annotationsDisplay images and 2D annotations only when their messages' timestamps match. Newly received 2D annotation messages will be buffered until a matching set can be displayed.
Flip horizontalFlip image horizontally over a vertical axis
Flip verticalFlip image vertically over a horizontal axis
RotationRotate image by 90°, 180°, or 270°
Color mode
  • Color map – Pre-defined color palette
  • Gradient – Smooth transition between two custom colors
Color mapOnly shown if "Color mode" is set to "Color map".

For mapping mono16 and 16UC1 image values to colors:
  • "Turbo" (Google)
  • "Rainbow" (RViz)
GradientOnly shown if "Color mode" is set to "Gradient".

Specifies gradient color values for mono16 and 16UC1 images.
Value minMinimum scaling value for mono16 and 16UC1 depth images (default: 0).
Value maxMaximum scaling value for mono16 and 16UC1 depth images (default: 10000).

Scene

fielddescription
Render statsDisplay rendering performance statistics in panel corner
BackgroundColor of background behind the image
Label scaleSize of text labels
Ignore COLLADA <up_axis>Ignore the <up_axis> tag in COLLADA files
Mesh up axisDirection of “up” when loading meshes (STL, OBJ) without orientation info ("Y-up", "Z-up")

Image annotations

2D image annotation marker topics to display.

Transforms

List of transform messages to display.

See the 3D panel docs for more information on possible settings.

Topics

List of 3D marker topics to superimpose on the image.

Custom layers

See the 3D panel docs for more information on possible settings.

User interactions

Right-click on the image to download it as a PNG file.

download as png

Click any displayed image marker to view its details.

marker details

Scroll to zoom, and drag to pan. Annotations will re-render on zoom to remain sharp.

Shortcuts

  • Scroll – Zoom in and out

Troubleshooting video delay

You may see errors for foxglove.CompressedVideo topics stating that the frame being displayed is delayed relative to the most recent frame. Video decoding behavior can vary across platforms, and some platforms may experience delays while others do not. It is possible to configure your video stream to optimize for low-latency decoding, but it may be impossible to guarantee that a video stream can be decoded with zero latency on all platforms.

Some tips on how configure the video encoding to best achieve low-latency decoding:

  • Use the BASELINE profile for h264 encoded streams. This profile is preferred because it does not support B frames. Profiles which support B frames may introduce decoding delay, even if the encoded stream doesn't actually contain B frames.
  • Disable frame reordering on your encoder.
  • Lower profile levels (level_idc) usually require smaller buffers, resulting in lower-latency decoding.
  • If your encoder allows it, use a bitstream_restriction in the VUI parameters to limit the size of the buffer (max_dec_frame_buffering) and also disable frame reordering (max_num_reorder_frames).

System CPU load and power consumption may also contribute to decoding delays. Hardware-accelerated decoding is generally faster and more energy-efficient. You can check that your platform supports hardware-accelerated decoding by opening Google Chrome and entering chrome://gpu in the address bar. If you do not see Video Decode: Hardware accelerated on this page, but you believe that it should be supported, then you may need to take additional platform-specific steps to enable it.

These steps can help your platform achieve low-latency decoding, but there is no guarantee depending on the platform and device being used.