Widgets/Transformer

Draw Pixels Widget

Draw Pixels Widget

A "Transformer" type widget. Draw Pixels Widget draws points or rectangles on an image at specified positions. You can customize the color, size, and optionally add labels to the drawn shapes. This is useful for visualizing coordinates, marking regions, or annotating images in your workflow.

 

Inputs

  • image (DataType: ImageData) The input image on which to draw.

  • pixels (DataType: Point, Rect, Array, JsonObj) The position(s) to draw. Accepts a single point, rectangle, or an array of points/rectangles.

    Example formats:

    • Single point: { "x": 50, "y": 50 }
    • Array of points: [ { "x": 10, "y": 20 }, { "x": 30, "y": 40 } ]
    • Rectangle: { "left": 10, "top": 20, "width": 100, "height": 50 }
    • Array of rectangles: [ { "left": 10, "top": 20, "width": 100, "height": 50 }, { "left": 60, "top": 80, "width": 40, "height": 30 } ]

Outputs

  • image (DataType: ImageData) The output image with the drawn shapes.

Custom Settings

  • Color: The color used to draw the points or rectangles (default: #ffffff).
  • Size: The size of the point or the line width for rectangles (default: 2).
  • Label Property: The property name to use as a label for each point/rectangle (optional).
  • Font Size: The font size for labels (default: 12).

Custom Settings

 

Examples

Draw a Rectangle on an Image

This example shows how to set a rectangle’s dimensions and coordinates to highlight a specific area in an image.


Drag the example onto the workspace to explore and experiment!



In this example:

  1. On trigger, the Sequence widget passes the rectangle object (via the Object widget) to the Draw Pixels widget; an image is then supplied via the Base64 to Image widget to trigger the drawing
  2. The Base64 To Image widget converts a base64 string to image data and transmits it to the image port
  3. The Draw Pixels widget draws a red rectangle at the coordinates specified by the Rectangle Object
  4. The resulting image with the red rectangle is displayed in the Display widget

 

📌 Additional Notes

  • You can draw multiple points or rectangles by providing an array of positions.
  • The color, size, and label can be customized in the widget settings.

 

Glossary

  • Base64

    A way to convert binary data (like images) into text format using only letters, numbers, and a few symbols. This allows binary data to be stored or transmitted as text, making it easier to embed images directly in code or examples. Base64 To Image Widget: Converts Base64 encoded image strings into ImageData format that can be processed by other image widgets in Kemu.