# about the ViewProxy

**URL:** https://discourse.vtk.org/t/about-the-viewproxy/5843
**Category:** Web
**Created:** [May 22, 2021, 4:13am UTC](https://discourse.vtk.org/t/about-the-viewproxy/5843 "2021-05-22T04:13:05Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![zrxiaojie](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/z/e5b9ba/32.png) [@zrxiaojie](https://discourse.vtk.org/u/zrxiaojie)
#### Post date: [May 22, 2021, 4:13am UTC](https://discourse.vtk.org/t/about-the-viewproxy/5843/1 "2021-05-22T04:13:06Z")

</div>

Hi, I have a question about the ViewProxy. I try to realize the code like the MouseRangeManipulator example through the ViewProxy. and I create a div in the index.html as a container. But I find that although my mouse is outside the div, I can still control the actor. so how can I set the Interactor inside the element?Maybe it’s because I still don’t know the concept very well, and any suggestions will be helpful. Thanks in advance.

```javascript
const container = document.querySelector('#app')
viewProxy.setContainer(container)

```

---

<div class="post-metadata">

### Author: ![Sebastien\_Jourdain](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sebastien_jourdain/32/100_2.png) [@Sebastien\_Jourdain](https://discourse.vtk.org/u/Sebastien_Jourdain)
#### Post date: [May 22, 2021, 8:38pm UTC](https://discourse.vtk.org/t/about-the-viewproxy/5843/2 "2021-05-22T20:38:30Z")

</div>

That should work. Are you sure you are outside your div? My thinking is that the view is not feeling the full div.

---

<div class="post-metadata">

### Author: ![zrxiaojie](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/z/e5b9ba/32.png) [@zrxiaojie](https://discourse.vtk.org/u/zrxiaojie)
#### Post date: [May 23, 2021, 2:38am UTC](https://discourse.vtk.org/t/about-the-viewproxy/5843/3 "2021-05-23T02:38:59Z")

</div>

When I tried again, I found some details. The page seems to be divided by CornerAnnotation. And the div I created become a canvas. However when I try to use GenericRenderWindow, the problem is solved. Is it because I misunderstood some concepts of the ViewProxy?

This is the detail about an example code

```auto
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
    #app {
        width: 500px;
        height: 500px;
    }
</style>
</head>
<body>
<div id="app"></div>
</body>
<script type="text/javascript" src="MyWebApp.js"></script>
</html>

```

```javascript
import 'vtk.js/Sources/favicon';
import vtkViewProxy from 'vtk.js/Sources/Proxy/Core/ViewProxy'
import vtkRTAnalyticSource from 'vtk.js/Sources/Filters/Sources/RTAnalyticSource';
import vtkImageMapper from 'vtk.js/Sources/Rendering/Core/ImageMapper';
import vtkImageSlice from 'vtk.js/Sources/Rendering/Core/ImageSlice';
import vtkInteractorStyleManipulator from 'vtk.js/Sources/Interaction/Style/InteractorStyleManipulator';
import vtkMouseRangeManipulator from 'vtk.js/Sources/Interaction/Manipulators/MouseRangeManipulator';
const { SlicingMode } = vtkImageMapper;

// ----------------------------------------------------------------------------
// Standard rendering code setup
// ----------------------------------------------------------------------------

const viewProxy = vtkViewProxy.newInstance();
const container = document.querySelector('#app')
viewProxy.setContainer(container)
viewProxy.getRenderer().setBackground(0.5, 0.5, 0.5)

const rtSource = vtkRTAnalyticSource.newInstance();
rtSource.setWholeExtent(0, 200, 0, 200, 0, 200);
rtSource.setCenter(100, 100, 100);
rtSource.setStandardDeviation(0.3);

const mapper = vtkImageMapper.newInstance();
mapper.setInputConnection(rtSource.getOutputPort());
mapper.setSlicingMode(SlicingMode.K);

const actor = vtkImageSlice.newInstance();
actor.getProperty().setColorWindow(100);
actor.getProperty().setColorLevel(50);
actor.setMapper(mapper);

viewProxy.getRenderer().addActor(actor)

//add manipulator and interactor
const manipulator = vtkMouseRangeManipulator.newInstance({
    button: 1,
    scrollEnabled: true,
});
const wMin = 1
const range = rtSource.getOutputData().getPointData().getScalars().getRange()
const wMax = range[1] - range[0]
const wGet = actor.getProperty().getColorWindow;
const wSet = (w) => {
    actor.getProperty().setColorWindow(w);
}
manipulator.setVerticalListener(wMin, wMax, 1, wGet, wSet);
const interactorStyle = vtkInteractorStyleManipulator.newInstance();
interactorStyle.addMouseManipulator(manipulator)
viewProxy.getInteractor().setInteractorStyle(interactorStyle);
viewProxy.resetCamera()
viewProxy.renderLater()

```

---

<div class="post-metadata">

### Author: ![Sebastien\_Jourdain](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sebastien_jourdain/32/100_2.png) [@Sebastien\_Jourdain](https://discourse.vtk.org/u/Sebastien_Jourdain)
#### Post date: [May 24, 2021, 2:47pm UTC](https://discourse.vtk.org/t/about-the-viewproxy/5843/4 "2021-05-24T14:47:50Z")

</div>

The viewProxy give you more than what you care for and it is possible that the annotation part bleed outside of your container unless you add to its style `position: relative;`.

---

<div class="post-metadata">

### Author: ![zrxiaojie](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/z/e5b9ba/32.png) [@zrxiaojie](https://discourse.vtk.org/u/zrxiaojie)
#### Post date: [May 24, 2021, 4:11pm UTC](https://discourse.vtk.org/t/about-the-viewproxy/5843/5 "2021-05-24T16:11:42Z")

</div>

Thank you so much for your reply and suggestions!  
Indeed, I still need to learn a lot and pay more attention to the core functions of vtk.js.