# How to force widget manager to use a particular renderer?

**URL:** https://discourse.vtk.org/t/how-to-force-widget-manager-to-use-a-particular-renderer/11410
**Category:** Development
**Tags:** vtkjs
**Created:** [May 8, 2023, 11:37pm UTC](https://discourse.vtk.org/t/how-to-force-widget-manager-to-use-a-particular-renderer/11410 "2023-05-08T23:37:01Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![Sneha-pk](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sneha-pk/32/4216_2.png) [@Sneha-pk](https://discourse.vtk.org/u/Sneha-pk)
#### Post date: [May 8, 2023, 11:37pm UTC](https://discourse.vtk.org/t/how-to-force-widget-manager-to-use-a-particular-renderer/11410/1 "2023-05-08T23:37:01Z")

</div>

Hello ,  
I am trying to add axes actor to my vtk.js viewer component. I am then trying to use the axesActor to rotate the scene in y axis by 180 degree. I have created an instance of orientation widget and added the axesActor as actor to the widget. The issue is by adding “widgetManager.setRenderer(operationRenderer);” to the code, any other widget that I create is limited to the “operationRenderer”, which in my case is the small box holding the axesActor at the bottom left corner(screen shot attached). For example when i create a rectangle widget, it is created on that small left corner box. I want the axesActor to flip the actor in the parent renderer or the main screen and not the orientationWidget renderer.  
Please provide suggestions. Appreciate all the help.

```auto

///----------------trigger flip/rotate axis-----------
const handleFlipAxis = () => {
    console.log(" axis Handle flip run");
    const { axesActor, orientationWidget } = sceneLiveFrame;
    axesActor.rotateWXYZ(180, 0, 1, 0);
    
  };

```

```auto
//----------------creating the live viewer---------------
export const createLiveFrameScene = (
  container,
  dataArray,
  colorMap,
  maskDataArray,
  opacityFunction
) => {
  const renderWindow = vtkRenderWindow.newInstance({
    rootContainer: container,
  });

  const renderer = vtkRenderer.newInstance();
  const render = renderWindow.render;
  renderWindow.addRenderer(renderer);
  const openglRenderWindow = vtkOpenGLRenderWindow.newInstance();
  openglRenderWindow.setContainer(container);
  const { width, height } = container.getBoundingClientRect();
  openglRenderWindow.setSize(width, height);
  renderWindow.addView(openglRenderWindow);
  const interactor = vtkRenderWindowInteractor.newInstance();
  interactor.setView(openglRenderWindow);
  interactor.initialize();
  interactor.bindEvents(container);

  // mapper and actor
  const actorImage = vtkImageSlice.newInstance();
  const mapperImage = vtkImageMapper.newInstance();

  const interactorStyle = vtkInteractorStyleManipulator.newInstance();

  // // InteractionPresets.applyPreset('2D', interactorStyle);
  interactor.setInteractorStyle(interactorStyle);

  // enable zoom in / zoom out
  const zoomManipulatorMiddleButton =
    vtkMouseCameraTrackballZoomManipulator.newInstance();
  zoomManipulatorMiddleButton.setButton(2); // Middle Button
  interactorStyle.addMouseManipulator(zoomManipulatorMiddleButton);

  const zoomManipulatorScroll =
    vtkMouseCameraTrackballZoomManipulator.newInstance();
  zoomManipulatorScroll.setDragEnabled(false);
  zoomManipulatorScroll.setScrollEnabled(true);
  interactorStyle.addMouseManipulator(zoomManipulatorScroll);

  const zoomManipulatorLeft =
    vtkMouseCameraTrackballZoomManipulator.newInstance();
  zoomManipulatorLeft.setButton(1); // Left Button
  zoomManipulatorLeft.setControl(true);
  interactorStyle.addMouseManipulator(zoomManipulatorLeft);

  // enable pan
  const panManipulatorRightMouse =
    vtkMouseCameraTrackballPanManipulator.newInstance();
  panManipulatorRightMouse.setButton(3); // Right button
  interactorStyle.addMouseManipulator(panManipulatorRightMouse);

  const panManipulatorLeftMouse =
    vtkMouseCameraTrackballPanManipulator.newInstance();
  panManipulatorLeftMouse.setButton(1); // Left button
  panManipulatorLeftMouse.setShift(true);
  interactorStyle.addMouseManipulator(panManipulatorLeftMouse);

**********Adding the axes actor to represent the x and y axis of the live image viewer*********

// Setup axes

  const axesActor = vtkAxesActor.newInstance();
  const orientationWidget = vtkOrientationMarkerWidget.newInstance({
    actor: axesActor,
    interactor: interactor,
    renderer: renderer,
  });
  const operationRenderer = orientationWidget.getRenderer();
  orientationWidget.setParentRenderer();

  orientationWidget.setEnabled(true);
  orientationWidget.setViewportCorner(
    vtkOrientationMarkerWidget.Corners.BOTTOM_LEFT
  );
  orientationWidget.setViewportSize(0.1);
  orientationWidget.setMinPixelSize(100);
  orientationWidget.setMaxPixelSize(300);

  console.log('axes', axesActor, );

const widgetManager = vtkWidgetManager.newInstance();
widgetManager.setRenderer(renderer);

*//---- **************************suspected cause of problem********************** ----------
  widgetManager.setRenderer(operationRenderer);

axesActor.onModified(() => {
    // Get the orientation matrix of the axes actor
    console.log("axes actor modified");
    const orientationMatrix = axesActor.getMatrix();
    const axesOrientation = axesActor.getOrientation();
    const matrix = vtkMatrixBuilder.buildFromDegre(0,0,0);
    console.log('axes matrix', matrix);
    // Extract the y-axis of the orientation matrix
    const yAxis = [
      orientationMatrix[1],
      orientationMatrix[5],
      orientationMatrix[9],
    ];
    console.log("yAxis MATRIX", orientationMatrix, yAxis);

    // Check if the y-axis is pointing down (y < 0)
    if (yAxis[1] < 0) {
      // Flip the scene
      flipScene(camera, widgetManager, renderWindow, orientationWidget);
      axesActor.setMatrix(orientationMatrix);
      // console.log('newMatrix', newMatrix);
    }

      });

```

 ![image](https://discourse.vtk.org/uploads/default/original/2X/8/8c6f6ca63d2bdb077e33ccfef1816d57df2d2abc.jpeg)

---

<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 9, 2023, 12:37am UTC](https://discourse.vtk.org/t/how-to-force-widget-manager-to-use-a-particular-renderer/11410/2 "2023-05-09T00:37:50Z")

</div>

Are you trying to move the camera or the object? Based on your description, you want to modify the camera but your code move the object.

Then I don’t understand the intent behind those lines of code

```js
const operationRenderer = orientationWidget.getRenderer();
orientationWidget.setParentRenderer();

axesActor.onModified(...);

```

Did you look at [that widget example](https://kitware.github.io/vtk-js/examples/InteractiveOrientationWidget.html)?

---

<div class="post-metadata">

### Author: ![Sneha-pk](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sneha-pk/32/4216_2.png) [@Sneha-pk](https://discourse.vtk.org/u/Sneha-pk)
#### Post date: [May 10, 2023, 2:14am UTC](https://discourse.vtk.org/t/how-to-force-widget-manager-to-use-a-particular-renderer/11410/3 "2023-05-10T02:14:50Z")

</div>

@Sebastien_Jourdain the intention behind this lines is to make the renderer of the orientationWidget same as those of other widgets being used. I am also using a rectangle widget.  
I want to move the object by moving or rotating the axis. I am not aware of a way of doing that without moving the camera.

---

<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 10, 2023, 10:01pm UTC](https://discourse.vtk.org/t/how-to-force-widget-manager-to-use-a-particular-renderer/11410/4 "2023-05-10T22:01:04Z")

</div>

Well the problem is that you are not moving the camera and that is why I wasn’t sure what you were doing.

Also none of the lines I listed does what you say they do.