Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Draw QImage in QOpenGLWidget



  • Hello everyone,

    I'm new to qt and to open gl so i'm struggling to understand how both works and how they work together.
    My goal is to draw an image in a QOpenGLWidget that will be a map, and i will then draw cars on this map that will move along the streets.
    For now after all my research i don't even understand how to draw an image the in the window. Does anyone know how to do that ? I guess it has to be simple as there's a QImage object but does it work with opengl?
    Also if you think there's an easier way to reach my goal than openglwidget, let me know !

    Thank you in advance for the help



  • For people asking the same question, here is my result (using QtCreator):

    • Create a new class that extends OpenGlWidget
    class MapOpenGL : public QOpenGLWidget
    {
    public:
        MapOpenGL( QWidget* parent = NULL);
    
        virtual void initializeGL();
        virtual void paintGL();
        virtual void resizeGL( int width, int heigh);
    };
    
    • In the ui, right click your OpenGLWidget, click on "promote to" and then use your new class
    • then you need to add your resource in the project. File -> New File -> Qt -> Qt Resource File
    • right click your qrc file and open editor. Create a prefix, then create a ressource file ( the file you wanna draw)
    • In your qrc sub folder, find your image, right click and copy the path
    • I then use QPainter to draw my image:
    MapOpenGL::MapOpenGL( QWidget* parent) : QOpenGLWidget (parent)
    {
    
    }
    
    void MapOpenGL::initializeGL(){
    }
    
    void MapOpenGL::paintGL(){
        QPainter p(this);
        QRectF target( 10, 10, 500, 500);
        p.drawImage( target, new QImage(QString("path_of_the_image_you_copied"));
    
    }
    

    For further information on how to draw, go check QPainter methods.


  • Lifetime Qt Champion

    Hi,

    Since you are using OpenGL, you should make a texture of it, and use OpenGL to paint it.



  • Hi,

    which type of texture ? I don't need QImage then ?


  • Lifetime Qt Champion

    An OpenGL texture.

    Qt provides the QOpenGLTexture class. You can create it using your QImage.



  • Okay i'll try it out thank you !



  • Ok so i decided to use QPainter as it seems to be way easier. So i implemented my paintGL method but the drawImage() method isn't working.

    Here is my code:

    MapOpenGL::MapOpenGL( QWidget* parent) : QOpenGLWidget (parent)
    {
    
    }
    
    void MapOpenGL::initializeGL(){
        bg = new QImage(QString("mulhouse.PNG"));
    }
    
    void MapOpenGL::paintGL(){
        QPainter p(this);
        p.setPen(Qt::white);
        QRectF target( 10, 10, 409, 210);
        p.drawImage( target, *bg);
    }
    

    Why is it not drawing my image knowing that it is in the same directory that my source class ?


  • Lifetime Qt Champion

    @Zarcoin Did you verify whether the image was actually properly loaded (https://doc.qt.io/qt-5/qimage.html#isNull)?
    "my image knowing that it is in the same directory that my source class" - this is your issue: the image must be in current working directory (default is your exe file dir).



  • Ok so i verified it and the image is indeed not loaded properly !
    However my image is in currend working directory so it should've loaded it.. Do you have an idea why it doesn't work ?



  • @jsulm as you can see here my image is in the same directory than the source and the working directory ( i know it's dirty programming but it's just for the time i understand how it works )

    5aa5748d-914b-48ee-95c1-c8db48e3eab8-image.png


  • Lifetime Qt Champion

    @Zarcoin What does

    qDebug() << QFile::exists("mulhouse.PNG");
    

    show?


  • Lifetime Qt Champion

    @Zarcoin said in Draw QImage in QOpenGLWidget:

    as you can see here my image is in the same directory than the source and the working directory

    And as I already said this is your problem. If you run your app and use a relative path, then the system will look for the file in current working directory. So: make sure the file is in the build directory where you executable is.



  • @jsulm said in Draw QImage in QOpenGLWidget:

    qDebug() << QFile::exists("mulhouse.PNG");

    It says false, there's apparently no such file or directory.
    You're certainly right saying my problem is that the file should be in my build directory, but i actually don't know where it is.
    How can i make it find the file in my project's directory ? I tried using

    painter.drawImage(QRect(100, 50, 100, 100),
                      QImage(QString("%1/mulhouse.PNG")
                      .arg(QCoreApplication::applicationDirPath()));
    

    But it's not working neither



  • @Zarcoin said in Draw QImage in QOpenGLWidget:

    my image is in the same directory than the source and the working directory

    As @jsulm has been saying, there is no relationship between a project's source directory and the working directory when the program runs. There is actually nothing you can call to find the source directory. So don't put a file you need at runtime there!

    How can i make it find the file in my project's directory ?

    You can't!

    @jsulm said:

    So: make sure the file is in the build directory where you executable is.

    Even this is not a good idea, or at least you cannot locate that via a relative path. While Creator may make that the working directory when it runs your program, that is not the case when you run your application outside of Creator.

    • Use resources if you want to "embed" the data inside your executable, for later retrieval via Qt's resource path syntax.

    • Get the program's full path to executable if you want to put it in the executable directory and find it at runtime.

    • Better, pick a suitable QStandardPaths element full path to locate the file in one of these at runtime.


  • Lifetime Qt Champion

    @Zarcoin If you use QtCreator you will find your build directory in "Projects/Build & Run/Build/Build directory".
    "How can i make it find the file in my project's directory ?" - you should not! How is your application supposed to work on other machines then?
    But you actually should use Qt resource files: https://doc.qt.io/qt-5/resources.html



  • First off thank you for all the help. If i understand right, the executable needs to know where my file is, which can be different depending on the machine.
    I would like the code to be executable on any machine, as i'm gonna export an executable of my project and send it to my teacher.

    Again, if i understand both of you, there's 2 ways i can do this:
    -with Qt resource files
    -with QStandardPaths

    is that right ?

    QStandardPaths seems way easier, so how do i use it if my file is in /Project which is the directory of my project (working directory) ?


  • Lifetime Qt Champion

    @Zarcoin said in Draw QImage in QOpenGLWidget:

    QStandardPaths seems way easier, so how do i use it if my file is in /Project which is the directory of my project (working directory) ?

    You will need to deploy your image file during build of your app.
    That's why I suggested to use resource files: this is actually easier and you do not pulute your app directory with image files (or what ever else).
    If you want to use QStandardPaths then read https://doc.qt.io/qt-5/qmake-advanced-usage.html and adjust your pro file to copy your image file to the build directory when you build your app.



  • @Zarcoin Hi,
    QStandardPaths will know nothing about your build dir.
    Resource file is a way to go:

    • add a resource file to your project (it will be automatically compiled and liked)
    • in the resource file add a prefix (can be just /) and to that prefix add your image
    • you can either right click on the image and select "copy path" or, assuming the prefix is / blindly type :/filename.ext as the path

    Done.



  • @artwaw Hi,

    So to resume, i need to:

    • create an application.qrc file
    • write this code:
    <!DOCTYPE RCC><RCC version="1.0">
    <qresource>
        <file>resource/mulhouse.PNG</file>
    </qresource>
    </RCC>
    
    • add in the .pro :
    RESOURCES     = application.qrc 
    
    • write in my code:
    bg->load(QString(":/mulhouse.PNG")
    

    am is correct ? i'm being very clear for the other people that will check this thread !


  • Lifetime Qt Champion

    Update:
    Oh you posted while i wrote.
    Yes its correct. but if image is in sub folder, the subfolder will be include in the path.

    Just a note:
    Use a QRessurce file is not complicated.
    The docs just start off looking complicated.

    In reality, it's just

    File - > New File
    alt text
    give it a name and press next.

    Then right click in the project view, and
    alt text

    Point to the image file in your subfolder.

    Then change code to use the syntax starting with :/
    and you should be good.



  • @Zarcoin You can however as @mrjj wrote - you can just click out this without having to write a single line of code.
    Truth to tell - I never write those files, just click it out. This way you don't have to worry about typos or format ;)



  • Woaw big thanks to you @mrjj for the explanation! So i did what you said, but unfortunately it's still not working. oof
    As you can see here i added an rqc and my file.
    7216fa03-ec3c-4d78-83be-9394e2afcdf2-image.png

    and i then wrote this code:

    void MapOpenGL::initializeGL(){
        bg = new QImage();
        qDebug() << QFile::exists("mulhouse.PNG");
    }
    
    void MapOpenGL::paintGL(){
        QPainter p(this);
    
        p.setPen(Qt::white);
    
        bool test = bg->load(QString(":/mulhouse.PNG"));
        if (test == false){
            p.drawLine(QLineF(10, 10, 500, 500));
            p.drawLine(QLineF(500, 10, 10, 500));
        }else{
            QRectF target( 10, 10, 409, 210);
            //QRectF source( 0.0, 0.0, 399, 200);
            p.drawImage( target, *bg);
        }
    }
    

    It still draws lines instead of the image and debug says false !
    Should i add a prefix in my rqc file ? how does it work exatcely in qtcreator ?



  • @Zarcoin your resource file seems to be empty/not include any files. However I can see you've included the png file in your project...
    Right-click on the resource file, select "open editor" or similar. Then add the file to the resource file. All we said about prefixes will become self-explanatory once you open the editor I hope.


  • Lifetime Qt Champion

    @Zarcoin

    Hi
    Try again, you right-click the wrong place. then it adds as other files.
    Right click the actual qrc file in the tree.
    You can have more than one qres file so one right-clicks the one , that file should be added to.

    So once you get the file to be in res "folder", you can right-click the file and take the path so its always 100% correct.



  • It works ! I didn't understand that i had to create a prefix and then add the file ! after that i can indeed right click on the file and copy the path

    Thank you so much to all of you for the help, you're so nice !



  • For people asking the same question, here is my result (using QtCreator):

    • Create a new class that extends OpenGlWidget
    class MapOpenGL : public QOpenGLWidget
    {
    public:
        MapOpenGL( QWidget* parent = NULL);
    
        virtual void initializeGL();
        virtual void paintGL();
        virtual void resizeGL( int width, int heigh);
    };
    
    • In the ui, right click your OpenGLWidget, click on "promote to" and then use your new class
    • then you need to add your resource in the project. File -> New File -> Qt -> Qt Resource File
    • right click your qrc file and open editor. Create a prefix, then create a ressource file ( the file you wanna draw)
    • In your qrc sub folder, find your image, right click and copy the path
    • I then use QPainter to draw my image:
    MapOpenGL::MapOpenGL( QWidget* parent) : QOpenGLWidget (parent)
    {
    
    }
    
    void MapOpenGL::initializeGL(){
    }
    
    void MapOpenGL::paintGL(){
        QPainter p(this);
        QRectF target( 10, 10, 500, 500);
        p.drawImage( target, new QImage(QString("path_of_the_image_you_copied"));
    
    }
    

    For further information on how to draw, go check QPainter methods.


  • Lifetime Qt Champion

    @Zarcoin said in Draw QImage in QOpenGLWidget:

    bg = new QImage();

    No need to allocate QImage on the heap. You are just adding the overhead of dereferencing it in each call of paintGL.



  • Yes don't worry that's what i did, i just wanted to show how it works ! But thank you tho !



  • @Zarcoin
    I never thought you can use QPainter in ::paintGL(), that's a new idea. have you compared the CPU usage with ::paintEvent() ?


  • Moderators

    @QtTester said in Draw QImage in QOpenGLWidget:

    I never thought you can use QPainter in ::paintGL(), that's a new idea. have you compared the CPU usage with ::paintEvent() ?

    There's no paintEvent with OpenGL widget, or specifically you shouldn't mess with it unless you want to break it. paintEvent is going to call the paintGL whenever it's ready for you to issue the draw commands or w/e. As for the CPU usage it probably is comparable.

    Note: please don't do the "stand up zombie" without a good reason. I really doubt the OP will be back to answer you.


Log in to reply