How to programmatically add the EllipseWidget?

Web vtk.js
1

Hello!

I have a well-configured functionality for adding a LineWidget by hand and thanks to vtk support I also can add this widgets programmatically by simply calling the lineWidget.updateHandleVisibility(0) and lineWidget.updateHandleVisibility(1) for two handlers to do them visible and responsive. However, now I need to add the same functionality for EllipseWidget and the problem is that the ellipseWidget does not have an updateHandleVisibility method.

Here is my code for lineWidget:

  const lineWidget = vtkLineWidget.newInstance()

  const currentHandle = measuresWidgetManager.addWidget(
    lineWidget,
    ViewTypes.SLICE
  )

  const lineWidgetState = currentHandle.getWidgetState()

  lineWidgetState.setLineThickness(1.5)
  lineWidgetState.getHandle1().setScale1(22)
  lineWidgetState.getHandle1().setShape(LineConstants.ShapeType.VIEWFINDER)
  lineWidgetState.getHandle2().setScale1(22)
  lineWidgetState.getMoveHandle().setVisible(false)
  lineWidgetState.getHandle2().setShape(LineConstants.ShapeType.VIEWFINDER)
  lineWidgetState.getPositionOnLine().setPosOnLine(1)
  lineWidgetState
    .getHandle1()
    .setOrigin(4.4889630000000125, -45.22037573007856, 9.716660438253825)
  lineWidgetState
    .getHandle2()
    .setOrigin(4.4889630000000125, 107.44763421995941, -132.89689485306604)
  lineWidget
    .getWidgetState()
    .getText()
    .setOrigin(4.4889630000000125, 107.44763421995941, -132.89689485306604)
  currentHandle.setText(lineWidget.getDistance().toFixed(2) + ' mm')

  currentHandle.updateHandleVisibility(0)
  currentHandle.updateHandleVisibility(1)

  setupSVG(lineWidget, renderer)

  ...

At the same time currentHandle of ellipseWidget have the following fields:

image
image810×1440 220 KB

image
image898×1440 208 KB

image

That is, there is no updateHandleVisibility method here. I would like to know if this happen by accident and actually updateHandleVisibility should be included in the ellipseWidget or if there is another special way to make the ellipseWidget visible after adding it not by hand, but by clicking on a button, for example.

Thanks.

2

@Forrest @finetjul could you please draw your attention to this topic?

3

The widget APIs are not uniform across individual widgets. If you removed the updateHandleVisibility calls, does it work?

4

If I remove the updateHandleVisibility calls, then the lineWidget's handles will be invisible, but this only applies to the lineWidget, and I have no problems with it. The problem arises with ellipseWidget, because this very life-saving updateHandleVisibility method is missing so the widget remains invisible. My question is how to make the ellipseWidget visible after it is created programmatically (not by hand, but by clicking a button).

5

You might find some indications here:

The shape widgets would need some code clean-up…

6

Thank you very much for such an example! It works in my case, but there is one huge problem.

I use resliceCursorWidget and maybe it’s my mistake, but all my widgets are set for Axial plane. As far as I understand, it’s a problem of setting normal.

Usually I set origin and normal this way:

  ellipseWidget
    .getManipulator()
    .setUserOrigin(measureEntityDB.position)

  ellipseWidget
    .getManipulator()
    .setUserNormal(
      resliceCursorWidget.getWidgetState().getPlanes()[
        xyzToViewType[planeContext.xyzToViewType] // 0 or 1 or 2
      ].normal 
    )

But now it didn’t help and I decided to try to set origin and normal on the handle object by implementing it into your code:

  currentHandle.grabFocus()

  currentHandle.get().manipulator.setUserOrigin(measureEntityDB.position)
  currentHandle
    .get()
    .manipulator.setWidgetNormal(
      resliceCursorWidget.getWidgetState().getPlanes()[
        xyzToViewType[planeContext.xyzToViewType] // 0 or 1 or 2
      ].normal
    )

  currentHandle.placePoint1(measureEntityDB.handle1)
  currentHandle.placePoint2(measureEntityDB.handle2)
  currentHandle.setCorners(measureEntityDB.handle1, measureEntityDB.handle2)
  currentHandle.setText(measureEntityDB.text)
  setupSVG(circleWidget, planeContext.renderer)
  currentHandle.invokeInteractionEvent()
  currentHandle.loseFocus()

However, it didn’t help either and for Axial plane everything looks fine:

image
image1006×1008 38.6 KB

But for the other two I have a side view:

image
image1298×1008 47.5 KB

It is important that when added manually everything works well. And when placing lineWidget programmatically (as in the my first question of this topic) there are also no problems with the normal and origin.

What do you think, is this an ellipseWidget problem or did I make a mistake somewhere?

7

not sure what the problem is. I would need to dig further. Sorry, I do not have “free” time lately…

1 Like