Widgets/Consumer

Display Widget

Display Widget

A "Consumer" type widget. Display Widget is a versatile visual component that allows you to visualize various types of data in real-time. It can display images, video frames, and numerical values.

 

Features

  • Real-time display of image data and video frames
  • Support for showing numeric values
  • Resizable when displaying images for optimal workspace layout

 

Inputs

  • In (DataTypes: ImageData, Number) The input port accepts image data for visual display or numeric values. When receiving image data, the widget will render it accordingly.

    NOTE: Only when displaying images, you can resize the display area.


Outputs

This widget has no output ports as it's designed purely for visualization purposes.

 

Examples

Displaying Camera Feed

This example shows how to use the Display widget to view a live camera feed.

NOTE: You need to install the Webcam Service to use this example.


Drag the example onto the workspace to explore and experiment!



In this example

  1. The Browser Webcam widget captures video from your camera and sends it as image data through its output port
  2. The Display widget receives this image data through its input port and shows it in real-time on your screen

 

Displaying Values

This example demonstrates using the Display Widget to visualize numeric values.


Drag the example onto the workspace to explore and experiment!



In this example

  1. The Slider widget generates a numeric value between 0 and 100 and sends it through its output port
  2. The Display widget receives this numeric value through its input port and shows it as a number on your screen

 

📌 Additional Notes

  • Image Display: The widget automatically adjusts its size when displaying images, but you can manually resize it for better workspace layout.
  • Performance: For video feeds, the widget updates in real-time and may consume more resources depending on the frame rate.
  • Data Types: The widget handles both ImageData and Number types seamlessly, automatically detecting the input type.

 

Glossary

  • ImageData

    A data structure that contains pixel data for an image, including color information for each pixel in a rectangular grid.

  • Number

    A numeric data type that can represent integers, floating-point values, or mathematical calculations.