# vtkHandleWidget
**URL:** https://discourse.vtk.org/t/vtkhandlewidget/631
**Category:** Web
**Created:** [March 28, 2019, 4:38pm UTC](https://discourse.vtk.org/t/vtkhandlewidget/631 "2019-03-28T16:38:59Z")
**Posts on this page:** 10
**Page:** 1
### Author:  [@marf](https://discourse.vtk.org/u/marf)
#### Post date: [March 28, 2019, 4:38pm UTC](https://discourse.vtk.org/t/vtkhandlewidget/631/1 "2019-03-28T16:38:59Z")
Can someone help me to understand, how to use the vtkHandleWidget? The example does not help me at all ☹
Currently I try to set it up like this:
> const handle = vtkHandleWidget.newInstance()
> const rep = vtkHandleRepresentation.newInstance()
>
> handle.setInteractor(renderWindow.getInteractor())
> handle.setWidgetRep(rep)
>
> handle.onInteractionEvent(() =\> {
> console.log(‘Interaction’);
> });
But I always get the error
t.widgetRep.computeInteractionState is not a function
Also I would love to attach an existing Actor to the widget and did not find any way to do that yet
---
### Author:  [@marf](https://discourse.vtk.org/u/marf)
#### Post date: [April 2, 2019, 11:03am UTC](https://discourse.vtk.org/t/vtkhandlewidget/631/2 "2019-04-02T11:03:17Z")
Hey sadly I didn’t get anywhere with this yet, so any input would be appreciated
---
### Author:  [@Sebastien\_Jourdain](https://discourse.vtk.org/u/Sebastien_Jourdain)
#### Post date: [April 2, 2019, 1:52pm UTC](https://discourse.vtk.org/t/vtkhandlewidget/631/3 "2019-04-02T13:52:49Z")
You can look [here](https://kitware.github.io/vtk-js/docs/concepts_widgets.html) as an alternative. Also in the example section, you can find a couple example using the new widget infrastructure.
---
### Author:  [@marf](https://discourse.vtk.org/u/marf)
#### Post date: [April 2, 2019, 2:45pm UTC](https://discourse.vtk.org/t/vtkhandlewidget/631/4 "2019-04-02T14:45:17Z")
Thank you, I’ll look into it
---
### Author:  [@sankhesh](https://discourse.vtk.org/u/sankhesh)
#### Post date: [April 2, 2019, 3:41pm UTC](https://discourse.vtk.org/t/vtkhandlewidget/631/5 "2019-04-02T15:41:59Z")
You can look at the [multiple tests](https://vtk.org/doc/nightly/html/c2_vtk_t_8.html#c2_vtk_t_vtkHandleWidget) that exercise the handle widget.
Worth noting - Take a look at the vtkSeedWidget - It is an interactive widget that adds/edits/deletes handle widgets with user interaction.
---
### Author:  [@marf](https://discourse.vtk.org/u/marf)
#### Post date: [April 10, 2019, 12:51pm UTC](https://discourse.vtk.org/t/vtkhandlewidget/631/6 "2019-04-10T12:51:57Z")
First: Could it be the case, that the new Widgets are not yet in the pre-packed JS file from [https://unpkg.com/vtk.js](https://unpkg.com/vtk.js) yet? Because I can easily access vtk.Interaction.Widgets through it, but vtk.Widgets is undefined. In the npm package though, I can find them
Secondly: Could you please lay down the very basic pipeline to create one of the new widgets and attach it to a renderer? I am trying to figure it out by trial and error combined with the information from [Widgets | vtk.js](https://kitware.github.io/vtk-js/docs/concepts_widgets.html), but so far I don’t really get anywhere. I can use the StateBuilder but calling the Widgetfactory returns a Widget(I guess?) which causes the following errors
> Uncaught TypeError: Cannot read property ‘onModified’ of undefined
>
> or when trying to call methods on the result
> Uncaught TypeError: Cannot destructure property `viewId` of ‘undefined’ or ‘null’.
---
### Author:  [@Forrest](https://discourse.vtk.org/u/Forrest)
#### Post date: [April 10, 2019, 5:35pm UTC](https://discourse.vtk.org/t/vtkhandlewidget/631/7 "2019-04-10T17:35:50Z")
The widgets should be accessible via `vtk.Widgets` when using the unpkg URL. I verified by running a small example. You are using the latest version of vtk.js, correct?
Check out the [PolyLine widget](https://github.com/Kitware/vtk-js/tree/master/Sources/Widgets/Widgets3D/PolyLineWidget) for an example of a completed widget. While the widget does slightly more than just a simple handle widget, it’s a good starting point for showing off how to construct a widget and attach it to a renderer.
---
### Author:  [@marf](https://discourse.vtk.org/u/marf)
#### Post date: [April 15, 2019, 9:23am UTC](https://discourse.vtk.org/t/vtkhandlewidget/631/8 "2019-04-15T09:23:46Z")
Thank you for your answer. I changed the URL to [https://unpkg.com/vtk.js@8.4.2/dist/vtk.js](https://unpkg.com/vtk.js@8.4.2/dist/vtk.js) now, to make sure it is the current version. This works in a small test-HTML without any issues but in my real application, I always get some older version it appears (I’m also missing some other functionality).
Since I’m working with typescript, I import vtk via a script tag in my HTML and access it by declaring
> declare var vtk: any;
This lets me access the import in my code, but as I said, apparently an “incomplete” or old version ☹ I will keep trying to figure out why. I would have wished it was cache related but it does not seem to be
---
### Author:  [@marf](https://discourse.vtk.org/u/marf)
#### Post date: [April 15, 2019, 9:50am UTC](https://discourse.vtk.org/t/vtkhandlewidget/631/9 "2019-04-15T09:50:02Z")
Ooook nevermind, somehow I was still importing my old, local vtk.js and the script import is not working like that in Typescript/Angular.
I had to dynamically create the script tag for the import and NOW I finally have an up to date vtk.js
> public loadScript(url: string) {
> const body = document.body;
> const script = document.createElement(‘script’);
> script.innerHTML = ‘’;
> script.src = url;
> script.async = false;
> script.defer = true;
> body.appendChild(script);
> }
---
### Author:  [@diaztula](https://discourse.vtk.org/u/diaztula)
#### Post date: [September 11, 2019, 12:16pm UTC](https://discourse.vtk.org/t/vtkhandlewidget/631/10 "2019-09-11T12:16:36Z")
Hello @marf
I had the same error. After looking at the source code of _HandleWidget_ (Sources/Interaction/Widgets/HandleWidget) I found out that it actually uses a _SphereHandleRepresentation_ instance:
```
// Overriden method
publicAPI.createDefaultRepresentation = () => {
if (!model.widgetRep) {
model.widgetRep = vtkSphereHandleRepresentation.newInstance();
}
};
```
In your example, I changed `const rep = vtkHandleRepresentation.newInstance()` by `const rep = vtkSphereHandleRepresentation.newInstance();` and is working fine. Now I’m able to position the widget programmatically and do some other stuffs.
Cheers