# Making a Hello World VTK.js Proxy (help!)
**URL:** https://discourse.vtk.org/t/making-a-hello-world-vtk-js-proxy-help/10537
**Category:** Web
**Tags:** code
**Created:** [January 25, 2023, 3:24pm UTC](https://discourse.vtk.org/t/making-a-hello-world-vtk-js-proxy-help/10537 "2023-01-25T15:24:21Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@davidshq](https://discourse.vtk.org/u/davidshq)
#### Post date: [January 25, 2023, 3:24pm UTC](https://discourse.vtk.org/t/making-a-hello-world-vtk-js-proxy-help/10537/1 "2023-01-25T15:24:21Z")
I’ve been messing around with VTK.js proxies for quite some time and still don’t feel I have a great handle on them, so I decided to try making the world’s simplest proxy / proxymanager - unfortunately it doesn’t work. Hoping someone can give me a hand in getting this working. 🙂
**Repo:**
> **[GitHub - davidshq/vtk-proxymanager-discourse](https://github.com/davidshq/vtk-proxymanager-discourse)**
>
> Contribute to davidshq/vtk-proxymanager-discourse development by creating an account on GitHub.
**Goal** :
Render a simple cone using VTK.js proxies and a proxy manager.
**Process**
First I created a [really simple cone without using proxies](https://github.com/davidshq/vtk-proxymanager-discourse/blob/main/src/index-geometry.js) (this works).
Then I attempted to follow the instructions in this thread on [VTK.js proxies](https://discourse.vtk.org/t/vtk-js-proxies/5476) on the current forum.
The instructions are:
1. Create a proxy config ([VolView/main/src/vtk/proxy.js](https://github.com/Kitware/VolView/blob/main/src/vtk/proxy.js))
- Result: [proxyConfig.js](https://github.com/davidshq/vtk-proxymanager-discourse/blob/main/src/proxyConfig.js)
2. Try a single volume representation (this points to same file as above, specifically line 59):
- Result: Remains the same as above
3. Create a ProxyManager that consumes the config ([paraview-medical/master/src/main.js](https://github.com/KitwareMedical/paraview-medical/blob/master/src/main.js#L28))
- This is a little hard to follow, the repository has been renamed from `paraview-medical` to `VolView` and line 28 is blank.
- I went back through the git history and found a [version from before the post was made](https://github.com/Kitware/VolView/commit/558b3d9d42482ed9fa2b8a28826aab3d74a55492#diff-27653c212e1cfe533e4eb2f7d0d3f89604c9de48a09583b4cbbbcbd08a07da79), strangely this one’s line 28 doesn’t seem relevant either.
- But I think it may be line 26 (in the old version) we want or line 43 (in the new version)
- Result: [main.js](https://github.com/davidshq/vtk-proxymanager-discourse/blob/main/src/main.js)
4. Need to add a `vtkImageData` to a `TrivialProducer` proxy.
- Unfortunately the linked to file no longer exists. I think I found an [equivalent old version](https://github.com/Kitware/VolView/commit/62ddef17f2170d6427522d6d2a9af4c4bce3da35#).
- But I’m not sure the code here is what we need, there is no reference to a `TrivialProducer` proxy.
5. Create a ViewProxy: `proxyMaager.createProxy('Views', 'View3D', { name: 'my3DView' })`
6. Create a representation of source proxy and add it to the view.
So I got stuck on step 4 but jumping ahead past step 6 I see that @Forrest provided some sample code but this still leaves me a bit confused. I’ve added the sample code into [main.js](https://github.com/davidshq/vtk-proxymanager-discourse/blob/main/src/main.js).
But this doesn’t leave me quite with a finished product, I need to display the view.
The only example of using a proxy manager I can find is for the `AnimationProxyManager` and unfortunately it diverges enough due to the animation that I can’t translate it into something I can use.
So here is what I have: [main.js](https://github.com/davidshq/vtk-proxymanager-discourse/blob/main/src/main.js)
And here is what I think I still need:
1. A way to create a cone using `vtkGeometryRepresentationProxy` instead of a straight non-proxy render as shown in [index-geometry.js](https://github.com/davidshq/vtk-proxymanager-discourse/blob/main/src/index-geometry.js)
2. A way to actually render and display the view.
Any help is appreciated 🙂
Thanks,
Dave
You can find the example in the vtk.js source code at `Sources/Proxy/Animation/AnimationProxyManager/example`. I don’t recommend trying to use the code presented on the [VTK.js example page](https://kitware.github.io/vtk-js/examples/AnimationProxyManager.html) because it shows only the JS, it doesn’t include the also necessary `controller.html` and `proxyConfiguration.js` files.[1]
[1]: Note that you’ll have difficulty running this example outside of the VTK.js source as it imports directly from the source, not using node modules. You can fix it to work stand-alone by installing VTK.js (`npm i @kitware/vtk.js`) and changing the imports from the form:
`import 'vtk.js/Sources/Rendering/Profiles/All'`
to:
`import '@kitware/vtk.js/Rendering/Profiles/All'`
Essentially, prepending the import with `@kitware` and removing `/Sources` following `vtk.js`.
---
### Author:  [@Sebastien\_Jourdain](https://discourse.vtk.org/u/Sebastien_Jourdain)
#### Post date: [January 25, 2023, 5:03pm UTC](https://discourse.vtk.org/t/making-a-hello-world-vtk-js-proxy-help/10537/2 "2023-01-25T17:03:30Z")
Is there any reason that you want to create your cone at the `Representations` level rather than at the `Sources`?
Keep in mind of that split:
- Sources: Thing that produce data (like a mesh)
- Representations: Thing that will transform data into a representation into a given view (picture on screen)
- Views: Thing that gather representation into something to display
---
### Author:  [@davidshq](https://discourse.vtk.org/u/davidshq)
#### Post date: [January 25, 2023, 5:09pm UTC](https://discourse.vtk.org/t/making-a-hello-world-vtk-js-proxy-help/10537/3 "2023-01-25T17:09:52Z")
The other discourse thread I referenced above that had instructions on setting up a proxy referenced this file as an example of how to setup a proxy configuration and it has it in representations: [VolView proxy.js](https://github.com/Kitware/VolView/blob/ed5e980b671a11daaa32d1a184981da2565fbdeb/src/vtk/proxy.js#L34).
Can I simply move the declaration from `Representations` to `Sources`? e.g.:
```plaintext
Sources: {
TrivialProducer: createProxyDefinition(vtkSourceProxy),
GeometryProducer: createProxyDefinition(vtkGeometryRepresentation)
}
```
---
### Author:  [@Sebastien\_Jourdain](https://discourse.vtk.org/u/Sebastien_Jourdain)
#### Post date: [January 25, 2023, 5:14pm UTC](https://discourse.vtk.org/t/making-a-hello-world-vtk-js-proxy-help/10537/4 "2023-01-25T17:14:03Z")
No, you can not put a class that aim to “convert data into a graphical representation” and pretend it to “generate data”. Each of those groups imply a specific API.
---
### Author:  [@davidshq](https://discourse.vtk.org/u/davidshq)
#### Post date: [January 25, 2023, 5:16pm UTC](https://discourse.vtk.org/t/making-a-hello-world-vtk-js-proxy-help/10537/5 "2023-01-25T17:16:49Z")
Got it, but there doesn’t appear to be a `vtkGeometrySourceProxy?`
---
### Author:  [@Sebastien\_Jourdain](https://discourse.vtk.org/u/Sebastien_Jourdain)
#### Post date: [January 25, 2023, 5:20pm UTC](https://discourse.vtk.org/t/making-a-hello-world-vtk-js-proxy-help/10537/6 "2023-01-25T17:20:58Z")
But you can easily create it. The default SourceProxy support dataset or algorithm as input.
You can create your own proxy class that inherit SourceProxy and bundle [ConeSource](https://github.com/Kitware/vtk-js/tree/master/Sources/Filters/Sources/ConeSource) while exposing all the ConeSource properties.
Then when you create that source from the proxymanager, and want to display it in a view, it will create its representation for you (Geometry).
---
### Author:  [@davidshq](https://discourse.vtk.org/u/davidshq)
#### Post date: [January 25, 2023, 5:25pm UTC](https://discourse.vtk.org/t/making-a-hello-world-vtk-js-proxy-help/10537/7 "2023-01-25T17:25:45Z")
Do you happen to have an example I can see of someone creating their own proxy class that inherits from SourceProxy?
---
### Author:  [@Sebastien\_Jourdain](https://discourse.vtk.org/u/Sebastien_Jourdain)
#### Post date: [January 25, 2023, 5:29pm UTC](https://discourse.vtk.org/t/making-a-hello-world-vtk-js-proxy-help/10537/8 "2023-01-25T17:29:02Z")
I don’t but even thinking more about it, such thing could probably be done at the config layer directly with only few custom functions. I guess, I will have to create such example.