# How to programmatically add the EllipseWidget?
**URL:** https://discourse.vtk.org/t/how-to-programmatically-add-the-ellipsewidget/14199
**Category:** vtk.js
**Created:** [July 10, 2024, 11:23am UTC](https://discourse.vtk.org/t/how-to-programmatically-add-the-ellipsewidget/14199 "2024-07-10T11:23:16Z")
**Posts on this page:** 7
**Page:** 1
### Author:  [@antonskrebkov](https://discourse.vtk.org/u/antonskrebkov)
#### Post date: [July 10, 2024, 11:23am UTC](https://discourse.vtk.org/t/how-to-programmatically-add-the-ellipsewidget/14199/1 "2024-07-10T11:23:16Z")
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`:
```auto
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:
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.
---
### Author:  [@antonskrebkov](https://discourse.vtk.org/u/antonskrebkov)
#### Post date: [July 22, 2024, 11:54am UTC](https://discourse.vtk.org/t/how-to-programmatically-add-the-ellipsewidget/14199/2 "2024-07-22T11:54:04Z")
@Forrest @finetjul could you please draw your attention to this topic?
---
### Author:  [@Forrest](https://discourse.vtk.org/u/Forrest)
#### Post date: [July 22, 2024, 8:23pm UTC](https://discourse.vtk.org/t/how-to-programmatically-add-the-ellipsewidget/14199/3 "2024-07-22T20:23:19Z")
The widget APIs are not uniform across individual widgets. If you removed the `updateHandleVisibility` calls, does it work?
---
### Author:  [@antonskrebkov](https://discourse.vtk.org/u/antonskrebkov)
#### Post date: [July 23, 2024, 8:15am UTC](https://discourse.vtk.org/t/how-to-programmatically-add-the-ellipsewidget/14199/4 "2024-07-23T08:15:31Z")
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).
---
### Author:  [@finetjul](https://discourse.vtk.org/u/finetjul)
#### Post date: [July 30, 2024, 4:32pm UTC](https://discourse.vtk.org/t/how-to-programmatically-add-the-ellipsewidget/14199/5 "2024-07-30T16:32:28Z")
You might find some indications here:
>
>
> \### Context
> It is not easy to place an ellipse widget programatically.
> https:/…/discourse.vtk.org/t/how-to-programmatically-add-the-ellipsewidget/14199/2
>
>
> \### Results
> Update the existing ShapeWidget example.
> It's not perfect though...
>
> \### Changes
> \- \[x\] Documentation and TypeScript definitions were updated to match those changes
>
> \### PR and Code Checklist
> \- \[x\] \[semantic-release\](https://github.com/semantic-release/semantic-release) commit messages
> \- \[x\] Run \`npm run reformat\` to have correctly formatted code
>
> \### Testing
> \- \[\] This change adds or fixes unit tests
> \- \[x\] Tested environment:
> - \*\*vtk.js\*\*: master
> - \*\*OS\*\*: Windows 11
> - \*\*Browser\*\*: Chrome
The shape widgets would need some code clean-up…
---
### Author:  [@antonskrebkov](https://discourse.vtk.org/u/antonskrebkov)
#### Post date: [August 2, 2024, 4:21pm UTC](https://discourse.vtk.org/t/how-to-programmatically-add-the-ellipsewidget/14199/6 "2024-08-02T16:21:04Z")
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:
```auto
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:
```auto
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:
But for the other two I have a side view:
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?
---
### Author:  [@finetjul](https://discourse.vtk.org/u/finetjul)
#### Post date: [August 2, 2024, 4:30pm UTC](https://discourse.vtk.org/t/how-to-programmatically-add-the-ellipsewidget/14199/7 "2024-08-02T16:30:26Z")
not sure what the problem is. I would need to dig further. Sorry, I do not have “free” time lately…