Draw QImage in QOpenGLWidget

Zarcoin

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

Zarcoin

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.

SGaist

Hi,

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

Zarcoin

Hi,

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

SGaist

An OpenGL texture.

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

Zarcoin

Okay i'll try it out thank you !

Zarcoin

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 ?

jsulm

@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).

Zarcoin

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 ?

Zarcoin

@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 )

jsulm

@Zarcoin What does

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

show?

jsulm

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

Zarcoin

@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

JonB

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

jsulm

@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

Zarcoin

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) ?

jsulm

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

artwaw

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

Zarcoin

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

mrjj

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.

artwaw

@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 ;)