# QML - VTKRenderWindow inside a rectangle

**URL:** https://discourse.vtk.org/t/qml-vtkrenderwindow-inside-a-rectangle/11850
**Category:** Support
**Created:** [June 29, 2023, 11:20am UTC](https://discourse.vtk.org/t/qml-vtkrenderwindow-inside-a-rectangle/11850 "2023-06-29T11:20:43Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![ZelieR](https://discourse.vtk.org/user_avatar/discourse.vtk.org/zelier/32/7375_2.png) [@ZelieR](https://discourse.vtk.org/u/ZelieR)
#### Post date: [June 29, 2023, 11:20am UTC](https://discourse.vtk.org/t/qml-vtkrenderwindow-inside-a-rectangle/11850/1 "2023-06-29T11:20:43Z")

</div>

Hi everyone,

I’am trying tu use vtk in a QML project.  
I’d like to display my vtk window in a ColumnLayout in my QML but I think I did something wrong because it doesn’t work.

I use VTK 9.2.6

Here is my qml:

```auto
import QtQuick 2.9
import QtQuick.Controls 1.4
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15

// import the VTK module
import VTK 9.2

// window containing the application
ApplicationWindow {
     id: appWin
     // title of the application
     title: qsTr("VTK QtQuick App")
     width: 1000
     height: 800
     color: palette.window
     SystemPalette {
          id: palette
          colorGroup: SystemPalette.Active
     }

     
     signal value1Signal(val: real)

  
     // menu containing two menu items
     menuBar: MenuBar {
          Menu {
               title: qsTr("File")
               MenuItem {
                    text: qsTr("&Open")
                    onTriggered: console.log("Open action triggered");
               }
               MenuItem {
                    text: qsTr("Exit")
                    onTriggered: Qt.quit();
               }
          }
     }

     // Left Side Zone
     Rectangle {
          id : leftPanel
          anchors.top : parent.top
          anchors.left : parent.left
          anchors.bottom : parent.bottom
          width: 200
          color : "#f0f0f0"

          ColumnLayout {
               anchors.fill: parent
               anchors.margins: 10
               spacing: 10

               Text {
                    Layout.fillWidth: true
                    text: "<b>Properties</b>"
               }
               
               RowLayout {
                    spacing: 5
                    Text {
                         Layout.fillWidth: true
                         text: "<i>Value 1 :</i>"
                    }
                    Slider {
                         Layout.fillWidth: true

                         minimumValue: 0
                         stepSize: 1
                         maximumValue: 75
                         value: 0
                         updateValueWhileDragging : true

                         onValueChanged : appWin.value1Signal(value)
                    }
               }

               Item {
                 // spacer item
                 Layout.fillWidth: true
                 Layout.fillHeight: true
                 //Rectangle { anchors.fill: parent; color: "#ffaaaa" } // to visualize the spacer
             }
          }
     }

     // Right Side Zone
     Rectangle {
        anchors.top : parent.top
        anchors.left : leftPanel.right
        anchors.bottom : parent.bottom
        anchors.right : parent.right

          ColumnLayout {
               anchors.fill: parent
               anchors.margins: 10
               spacing: 10

               Text {
                    Layout.fillWidth: true
                    text: "<b>3D View</b>"
               }

              // Instantiate the vtk render window
              VTKRenderWindow {
                  id: vtkwindow
                  anchors.top : parent.top
                  anchors.left : leftPanel.right
                  anchors.bottom : parent.bottom
                  anchors.right : parent.right
              }

              // add one or more vtk render items
              VTKRenderItem {
                  objectName: "VTKView"

                  x: vtkwindow.x
                  y: vtkwindow.y
                  width: vtkwindow.width
                  height: vtkwindow.height

                  // Provide the handle to the render window
                  renderWindow: vtkwindow
              }

          }

     }
}

```

And in my c++ main:

```auto
int main(int argc, char* argv[])
{
	 Q_INIT_RESOURCE(qml);

	 QQuickVTKRenderWindow::setupGraphicsBackend();
	 QGuiApplication app(argc, argv);
	 QQmlApplicationEngine engine;
	 engine.load(QUrl("qrc:/main.qml"));
	 QObject* topLevel = engine.rootObjects().value(0);
	 QQuickWindow* window = qobject_cast<QQuickWindow*>(topLevel);
	 window->show();

	 // Fetch the QQuick window using the standard object name set up in the constructor
	 QQuickVTKRenderItem* qquickvtkItem = topLevel->findChild<QQuickVTKRenderItem*>("VTKView");
.......

```

When I start my application I have many errors in the output, starting by:

```auto
2023-06-29 13:16:21.831 ( 2.289s) [] vtkOpenGLState.cxx:1171 WARN| Error glGetBoolean1 OpenGL errors detected
  0 : (1286) Invalid framebuffer operation

```

---

<div class="post-metadata">

### Author: ![sankhesh](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sankhesh/32/73_2.png) [@sankhesh](https://discourse.vtk.org/u/sankhesh)
#### Post date: [June 29, 2023, 4:59pm UTC](https://discourse.vtk.org/t/qml-vtkrenderwindow-inside-a-rectangle/11850/2 "2023-06-29T16:59:50Z")

</div>

Hi @ZelieR,

The QtQuick module in VTK underwent a major change in how the VTK view is rendered in the QtQuick scenegraph. The new changes would allow you to work around the issue you’re seeing. The changes have not been released yet but you can try it by building the master branch.

---

<div class="post-metadata">

### Author: ![ZelieR](https://discourse.vtk.org/user_avatar/discourse.vtk.org/zelier/32/7375_2.png) [@ZelieR](https://discourse.vtk.org/u/ZelieR)
#### Post date: [June 30, 2023, 6:20am UTC](https://discourse.vtk.org/t/qml-vtkrenderwindow-inside-a-rectangle/11850/3 "2023-06-30T06:20:12Z")

</div>

Thank you @sankhesh for your answer, I’ll try with the master branch.

Do you know when the next release will be?

EDIT : I’ve tried with the master branch of VTK and got the same error

---

<div class="post-metadata">

### Author: ![sankhesh](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sankhesh/32/73_2.png) [@sankhesh](https://discourse.vtk.org/u/sankhesh)
#### Post date: [June 30, 2023, 4:09pm UTC](https://discourse.vtk.org/t/qml-vtkrenderwindow-inside-a-rectangle/11850/4 "2023-06-30T16:09:37Z")

</div>

> [@ZelieR](#):
>
> Do you know when the next release will be?

> [@VTK 9.3.0 Release Cycle](https://discourse.vtk.org/t/vtk-9-3-0-release-cycle/11598):
>
> Hi all, It’s about time for another VTK release. The CI dashboards have been stabilizing fairly well and it seems like a good time to start cutting a release. Tentative dates: Jun 15: branch and create rc1 Jun 22: rc2 and bugfix focusing (CI should be solid by this point) Jun 29: rc3 if needed (final if possible); revert becomes more likely for issues that arise Jul 6: rc4 if needed (final if possible); platform/compiler fixes only by now Jul 13: rc5 if needed (final if possible) Jul 20: fi…

> [@ZelieR](#):
>
> EDIT : I’ve tried with the master branch of VTK and got the same error

Did you switch to using the `QQuickVTKItem` instead of the `QQuickVTKRenderItem`? If so, what does your code look like? Maybe something else is causing the issue.

---

<div class="post-metadata">

### Author: ![ZelieR](https://discourse.vtk.org/user_avatar/discourse.vtk.org/zelier/32/7375_2.png) [@ZelieR](https://discourse.vtk.org/u/ZelieR)
#### Post date: [July 3, 2023, 12:55pm UTC](https://discourse.vtk.org/t/qml-vtkrenderwindow-inside-a-rectangle/11850/5 "2023-07-03T12:55:16Z")

</div>

Thank you for the link to VTK 9.3.0 Release Cycle.

> Did you switch to using the `QQuickVTKItem` instead of the `QQuickVTKRenderItem` ? If so, what does your code look like? Maybe something else is causing the issue.

I haven’t because I didn’t knew about that.  
I have tried with QQuickVTKItem (using Examples\GUI\QML\QtQuickCone as an example) and it works like a charm, thank you very much for your help.