Skip to main content

Vision Display

The Vision Display is a high-performance image viewer component that can be added to any page in the Visualization editor. It renders images and overlays vision element annotations — geometric shapes, labels, segmentation results — on top of them.

Beyond just showing results, the Vision Display can also be interactive: users can pan, zoom, draw new shapes, and edit existing ones directly on the canvas.

Two layers​

The Vision Display exposes two layers of API, designed for different levels of control.

Display layer​

The standard layer, accessible like any other Visu component — Visu.page0.display1. Use this for the most common tasks:

  • Show the result of an inspection by sending a Capture or a Unit
  • Clear the display history
  • Read whether the user has clicked on the mini-display (hasUserInput)
  • Save the current view to an image file

This layer works at the capture/unit level — it is tightly integrated with the MES workflow.

Controller layer​

The advanced layer, accessed by calling getController() on the Display element. Use this for fine-grained, real-time control:

  • Push a raw Ve.Image directly to the display
  • Add, remove, and refresh individual vision elements
  • Control zoom level and pan position programmatically
  • Enable interactive tools so the user can draw or edit shapes
  • Read user interaction state: clicks, drawn shapes, edited entities, selection changes
var controller = Visu.page0.display1.getController();

The controller operates at the image and element level — it gives you direct control over what is rendered and how the user can interact with it.

tip

For most production use cases, the Display layer is sufficient. Use getController() when you need to work with raw images, individual elements, or user interaction beyond simple clicking.

How interactions work​

Unlike other programming environments, the Vision Display does not use event callbacks. Instead, user interactions are exposed as boolean state properties on the controller that you read in a cyclic script.

When the user performs an action (clicks the image, draws a shape, edits an entity), the corresponding flag is set to true. Your cyclic script reads the flag, processes the data, and resets the flag to false to signal that the event has been handled.

// CYCLIC script
var controller = Visu.page0.display1.getController();

if (controller.imageClicked) {
    controller.imageClicked = false;
    var x = controller.positionX;
    var y = controller.positionY;
    // react to the click...
}

See State Properties for the complete reference.