How to programmatically add the vtkSeedWidget or vtkSphereWidget

Web vtk.js
1

How to programmatically add the vtkSeedWidget or vtkSphereWidget,then execute widgetManager.enablePicking(), and you can drag the widget with the mouse

Thanks.

2

Isn’t placeWidget working ?

3

My requirement is for the program to automatically generate the vtkSeedWidget upon loading, rather than requiring a mouse click to do so

4

I made a PR to demonstrate how to programmatically place a seed widget:

5

It seems that I still can’t programmatically place a widget.

6

Indeed the branch was not merged and got outdated. I just rebased it and merged. Can you try again ?

7

I’m just starting to learn about VTK.js. Could you provide me with a demo that loads 10 VTKSeedWidgets at once by clicking a button (instead of loading one at a time by clicking with the mouse)

8

In the example I shared, You need to call 10 times AddWidget([x, y, z]) in a for loop.

9

for (let k = 0; k < 5; k++) {

widget = vtkSeedWidget.newInstance();

widgetHandle = widgetManager.addWidget(widget);

widgetHandle.setCenter([Math.random(), Math.random(), Math.random()]);

}

renderWindow.render();

I successfully loaded 5 vtkSeedWidgets using the code above, but when I click on these vtkSeedWidgets with the mouse, an error occurs：”Uncaught TypeError: Cannot read properties of undefined (reading ‘handleEvent’)“

I can’t drag these vtkSeedWidget with mouse either

10

Can you share your code on codesandbox or something similar ?

11

const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({
background: [0, 0, 0],
});
const renderer = fullScreenRenderer.getRenderer();
const renderWindow = fullScreenRenderer.getRenderWindow();

const cone = vtkConeSource.newInstance();
cone.setResolution(50);
const mapper = vtkMapper.newInstance();
const actor = vtkActor.newInstance();

// Create an instance of vtkPickerManipulator to constrain movement to a target actor
const manipulator = vtkPickerManipulator.newInstance();
// Set the target actor, which is representing a cone
manipulator.getPicker().addPickList(actor);

actor.setMapper(mapper);
mapper.setInputConnection(cone.getOutputPort());
actor.getProperty().setOpacity(0.5);

renderer.addActor(actor);

// ----------------------------------------------------------------------------
// Widget manager
// ----------------------------------------------------------------------------

const widgetManager = vtkWidgetManager.newInstance();
widgetManager.setRenderer(renderer);

let widget = null;
let widgetHandle = null;

renderer.resetCamera();

////////////////////The code below is what I added//////////////
///////////////////begin//////////////
for (let k = 0; k < 5; k++) {
widget = vtkSeedWidget.newInstance();
widget.setManipulator(manipulator);
widgetHandle = widgetManager.addWidget(widget);
widgetHandle.setCenter([Math.random(), Math.random(), Math.random()]);
}
renderWindow.render();
//////////////////end//////////////////

// -----------------------------------------------------------
// UI control handling
// -----------------------------------------------------------

fullScreenRenderer.addController(controlPanel);

document.querySelector(‘#addWidget’).addEventListener(‘click’, () => {
widgetManager.releaseFocus(widget);
widget = vtkSeedWidget.newInstance();

// Important: set the manipulator of the widget to constrain movement to the actor
widget.setManipulator(manipulator);
// Set the color of the seed (random color)
widget
.getWidgetState()
.getMoveHandle()
.setColor3(
Math.round(Math.random() * 255),
Math.round(Math.random() * 255),
Math.round(Math.random() * 255)
);

// Start placement interaction
widget.placeWidget(cone.getOutputData().getBounds());
widgetHandle = widgetManager.addWidget(widget);
widgetManager.grabFocus(widget);
});

I only added a few lines of code in the vtkSeedWidget example.

12

Did you try with the master of VTK.js ?

Because I realized that no new release of VTK.js were cut since I merged the PR I talked about above.

13

I’ve tried, but there are still some errors. You can try the code above. I can’t drag those five vtkSeedWidget

14

It’s because you need to import the “Glyph” profile:

import "@kitware/vtk.js/Rendering/Profiles/Glyph";

https://codesandbox.io/p/sandbox/programmatic-seed-widgets-tmqyz5