OpenGL view in QML

Page  
Prev
1
2

May 21, 2012

Merinas Merinas
Lab Rat
89 posts

You can found all you need on this post [qt-project.org] and the two or three next.

I compile it all here for you and other like you :

(.h)

  1.     #ifndef QWIDGETS_HPP
  2.     #define QWIDGETS_HPP
  3.      
  4.     #include <QDeclarativeItem>
  5.      
  6.     class MDE : public QDeclarativeItem
  7.     {
  8.      Q_OBJECT
  9.      
  10.     public:
  11.      MDE(QDeclarativeItem *parent = 0);
  12.      void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget = 0);
  13.     };
  14.      
  15.     #endif // QWIDGETS_HPP

(cpp)

  1.     #include "qwidgets.hpp"
  2.     #include <qdeclarative.h>
  3.     #include <QDeclarativeView>
  4.     #include <QApplication>
  5.     #include <QGLWidget>
  6.     #include <QPainter>
  7.      
  8.      
  9.     MDE::MDE(QDeclarativeItem *parent )
  10.     {
  11.      setFlag(QGraphicsItem::ItemHasNoContents, false);
  12.     }
  13.      
  14.     void MDE::paint(QPainter *p, const QStyleOptionGraphicsItem *o, QWidget *w)
  15.     {
  16.     p->beginNativePainting();
  17.     glBegin(GL_QUADS);
  18.     glColor3ub(0,0,255);
  19.     glVertex2d(0, 0);
  20.     glVertex2d(0, height());
  21.     glColor3ub(255,0,0);
  22.     glVertex2d(width(), height());
  23.     glVertex2d(width(), 0);
  24.     glEnd();
  25.     p->endNativePainting();
  26.  
  27.     }
  28.      
  29.      
  30.     int main(int argc, char *argv[])
  31.     {
  32.      QApplication app(argc, argv);
  33.      
  34.      qmlRegisterType<MDE>("MDEPlugins", 1, 0, "MDE");
  35.      
  36.      QDeclarativeView view;
  37.      QGLWidget *glWidget = new QGLWidget;
  38.      view.setViewport(glWidget);
  39.      view.setSource(QUrl::fromLocalFile("test.qml"));
  40.      view.show();
  41.      return app.exec();
  42.     }

(test.qml)

  1.     import QtQuick 1.0
  2.      
  3.     MDE{
  4.         width:200
  5.         height:200
  6.     }

And if you want to use a qmlviewer don’t forget -opengl option to active it.

But you’re right this is neither obvious or explain in the Qt doc. This should be easy and well documented.

May 21, 2012

ultramanjones ultramanjones
Lab Rat
8 posts

THANKS so much for your quick reply. I am in the process of trying to implement that right now.

So far I have tried to run this and I get error:

  1. MDE is not a type.

Along with a blank white window.

Incidentally, I was already trying to implement this same code and getting nowhere. Unfortunately, I am still getting nowhere.

I simply created a new QtQuick Application and inserted the code you listed above along with editing the .pro file appropriately

I’m just going to post what exactly what I did, as silly as it may look to someone who knows what they are doing:

The .pro file (QMLOpenGLtest.pro):

  1. # Add more folders to ship with the application, here
  2. folder_01.source = qml/QMLOpenGLtest
  3. folder_01.target = qml
  4. DEPLOYMENTFOLDERS = folder_01
  5.  
  6. # Additional import path used to resolve QML modules in Creator's code model
  7. QML_IMPORT_PATH =
  8.  
  9. # The .cpp file which was generated for your project. Feel free to hack it.
  10. SOURCES += \
  11.     main.cpp
  12.  
  13. # Please do not modify the following two lines. Required for deployment.
  14. include(qmlapplicationviewer/qmlapplicationviewer.pri)
  15. qtcAddDeployment()
  16.  
  17. HEADERS += \
  18.     qwidgets.hpp
  19.  
  20. QT += opengl \
  21.     script \
  22.     declarative
  23.  
  24. OTHER_FILES += \
  25.     test.qml

The qwidgets.hpp:

  1. #ifndef QWIDGETS_HPP
  2. #define QWIDGETS_HPP
  3.  
  4. #include <QDeclarativeItem>
  5. #include <QGLWidget>
  6.  
  7. class MDE : public QDeclarativeItem
  8. {
  9.  Q_OBJECT
  10.  
  11. public:
  12.  MDE(QDeclarativeItem *parent = 0);
  13.  void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget = 0);
  14. };
  15.  
  16. #endif // QWIDGETS_HPP

The main.cpp:

  1. #include "qwidgets.hpp"
  2. #include <qdeclarative.h>
  3. #include <QDeclarativeView>
  4. #include <QApplication>
  5. #include <QGLWidget>
  6. #include <QPainter>
  7.  
  8. MDE::MDE(QDeclarativeItem *parent )
  9. {
  10.  setFlag(QGraphicsItem::ItemHasNoContents, false);
  11. }
  12.  
  13. void MDE::paint(QPainter *p, const QStyleOptionGraphicsItem *o, QWidget *w)
  14. {
  15.     p->beginNativePainting();
  16.     glBegin(GL_QUADS);
  17.     glColor3ub(0,0,255);
  18.     glVertex2d(0, 0);
  19.     glVertex2d(0, height());
  20.     glColor3ub(255,0,0);
  21.     glVertex2d(width(), height());
  22.     glVertex2d(width(), 0);
  23.     glEnd();
  24.     p->endNativePainting();
  25.  
  26. }
  27.  
  28.  
  29. int main(int argc, char *argv[])
  30. {
  31.  QApplication app(argc, argv);
  32.  
  33.  qmlRegisterType<MDE>("MDEPlugins", 1, 0, "MDE");
  34.  
  35.  QDeclarativeView view;
  36.  QGLWidget *glWidget = new QGLWidget;
  37.  view.setViewport(glWidget);
  38.  view.setSource(QUrl::fromLocalFile("test.qml"));
  39.  view.show();
  40.  return app.exec();
  41. }

The test.qml:

  1. import QtQuick 1.0
  2.  
  3.    MDE{
  4.        width:200
  5.        height:200
  6.    }

——————————————————————

That is all. That is the ENTIRE project (except for the auto-generated qmlapplicationviewer files) All created within a “New QtQuick Application” started from the QtCreator wizard thing.

Although it may be obvious that I am missing something (or half of the program) to somebody somewhere, that is why I asked for a complete example. I have no idea what is wrong here. For all I know, this was never intended to stand alone.

Still trying. If any one can help it will be most appreciated…

Thanks

May 22, 2012

ultramanjones ultramanjones
Lab Rat
8 posts

I found the problem. The test.qml file should look like this:

  1. import QtQuick 1.0
  2. import MDEPlugins 1.0
  3.  
  4.    MDE{
  5.        width:200
  6.        height:200
  7.    }

Apparently, MDEPlugins is created as a resource (URI) that needs to be imported into the QML. I was laboring under the wrong idea that qmlRegisterType was enough to “expose” the MDE class for use in the QML simply by using the new keyword “MDE” as designated in the main.cpp on line 33:

  1. qmlRegisterType<MDE>("MDEPlugins", 1, 0, "MDE");

In fact, the “MDEPlugins” part of that C++ template names a URI for the type, and this needs to be imported into the QML just like any other resource before the type can be used. the “1,0” in the middle designates the “version”, so that is why you import it with:

  1. import MDEPlugins 1.0

I’m pretty sure I didn’t change anything else in the code from my last post, just added that.

I hope this will save someone some time. Cost me a couple days.

Cheers!
ultramanjones

July 19, 2012

bhaskarm bhaskarm
Lab Rat
2 posts

Hi,
I have the same requirement.I already had QGLWiget ,QWidget based application but now i have to use this and imprement in QML.I saw the above code works for basic operations but my in my requirement I have to rotate the image rendered in GLwidget to -180 to 180 degrees in x,y,z axis.I have requirement I should get called InitiliazeGl and resizeGL .Could you please tell me how to achieve this.

Thanks,
MBR

July 20, 2012

ultramanjones ultramanjones
Lab Rat
8 posts

I renamed the class GLGadget (instead of MDE)

Here is it’s QML code currently. This is a mere prototype with very little functionality. Clicking the mouse within the OpenGL window activates this MouseArea, however, and this sends a signal back to the C++ side. I’m sure you can use something similar to implement your rotation transformations.

  1.         GLGadget {
  2.             id: openGLRect
  3.             y: 67
  4.             width: 800
  5.             height: 500
  6.             anchors.left: leftMenu.right
  7.             anchors.leftMargin: 70
  8.  
  9.             MouseArea {
  10.                 id: mouse_areaGLRect
  11.                 anchors.fill: parent
  12.                 onClicked: {
  13.                     output1.text = mouseX
  14.                     openGLRect.setMouseX(mouseX)
  15.                     openGLRect.updateGLGadgetWindow()
  16.                 }
  17.             }
  18.         }

I don’t have time to go over this, but here is the header file. Mind you we are using a seperate thread to feed the GLGadget it’s graphics data, but the mouse functions here might be of interest to you, though incomplete here…

  1. #ifndef GLGADGET_H
  2. #define GLGADGET_H
  3.  
  4. #include <QDeclarativeItem>
  5. #include <QGLWidget>
  6. #include "myThread.h"
  7.  
  8.  
  9. //The GLGadget class provides an OpenGL context which is then instantiated
  10. // inside of QML.  Please note: Because of this, the instance is not
  11. // accessible on the C++ side of this project.  This  limitatioin could
  12. // possibly be addressed in the future by assigning a parent to it
  13. // so that it can be "found" through "findchild"  method in Qt
  14.  
  15. class GLGadget : public QDeclarativeItem
  16. {
  17.  Q_OBJECT
  18.  
  19.  
  20. public:
  21.  GLGadget(QDeclarativeItem *parent = 0);
  22.  //~GLGadget();
  23.  
  24.  void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget = 0);
  25.  void draw_nsu2d_Solution();
  26.  
  27. Q_PROPERTY(float GGMouseX READ GGMouseX WRITE setMouseX )
  28.  
  29. float GGMouseX();
  30. float m_mouseX;
  31.  
  32. public slots:
  33. int launchThread();
  34.  
  35.  
  36. private slots:
  37. int updateGLGadgetWindow();
  38.  
  39. float setMouseX(float);
  40.  
  41. private:
  42.  myThread *newthread;
  43.  QTimer *myTimer;
  44.  
  45. };
  46.  
  47. #endif // GLGADGET_H

Sorry no time to elaborate. Hope that helps some.

July 20, 2012

bhaskarm bhaskarm
Lab Rat
2 posts

Hi , Thank you very much for the reply.I will try what you posted and i will get back with results.

Page  
Prev
1
2

  ‹‹ HWND in QML      ListView contentY problem ››

You must log in to post a reply. Not a member yet? Register here!

 
Selected by the fine Qt Content Robot based on tags and ratings.

Possibly related content

Wiki articles

Forum posts and FAQ

© 2013 Qt Project Hosting. Qt® and the Qt logo is a registered trade mark of Digia plc and/or its subsidiaries and is used pursuant to a license from Digia plc and/or its subsidiaries.
All other trademarks are property of their respective owners. Privacy Policy
This site is hosted by Gitorious AS. Your use of this web site is governed by these terms of service.

Qt Project Hosting, P.O. Box 4332 Nydalen, 0402 Oslo, Norway. Org. Nr. 997 447 913