Skip to main content

Quick Start

This page walks through the two most common ways to use the Vision Display: sending a Capture to show inspection results, and using the controller to push a raw image with elements.

Step 1 — Add a Display element​

In the Project section, go to Visualization and add a Display element to your page, just like any other component. Give it an ID — for example, display1.

Save the project. From that moment, the display is accessible in your scripts as:

Visu.page0.display1
info

For detailed instructions on adding elements to the Visu editor, see Add Elements in the Software Guide.

Step 2 — Show a result using sendCapture​

The most common pattern is to send a Capture at the end of each inspection cycle. A Capture bundles the image and the vision elements together.

// SIMPLE or CYCLIC script

// Acquire image and run inference
var image = Cameras.camera1.getImage();
var result = Brains.brain1.inference(image);

// Build a Capture with the image and detection results
var capture = new Capture(image, "inspection");
capture.addVisionElement(result.detections, "Detections");

// Send it to the display
Visu.page0.display1.sendCapture(capture);
Visu.update();

The display will show the image with the detections overlaid. The user can then open the full-screen view by double-clicking the mini-display.

Step 3 — Use the controller for raw image and elements​

If you want to push a raw image and add elements individually — without building a Capture — use getController().

// INIT script — get the controller once and store it globally
global var ctrl = Visu.page0.display1.getController();
// CYCLIC script

// Set the image
var image = Cameras.camera1.getImage();
ctrl.setImage(image);

// Remove previous elements and add new ones
ctrl.clearElements();

var rect = new Ve.Rect2d(...);
ctrl.addElement(rect, "Results");

This approach gives you direct control over the image and each individual element. See the Controller API for the full reference.

Step 4 — React to user clicks (optional)​

If you want to know where the user clicked on the image, enable the click and read the state in a cyclic script:

// CYCLIC script

if (ctrl.imageClicked) {
    ctrl.imageClicked = false; // reset the flag
    var x = ctrl.positionX;
    var y = ctrl.positionY;
    printLog("User clicked at: " + x.toString() + ", " + y.toString());
}
tip

Always reset the boolean flag (ctrl.imageClicked = false) after reading it, otherwise it will remain true on every subsequent cycle.