about the ViewProxy

Web
1

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.

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

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

3

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

<!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>

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()
4

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;.

1 Like
5

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.