Using relative path for image:url in stylesheet

JonB

@lukutis222 said in Using relative path for image:url in stylesheet:

What if I want to simply insert an icon somewhere on the screen. What widget would I choose since I need a widget to use setIcon property?

QLabel has setPixmap(const QPixmap &), which accepts more than setIcon() would, but can take icons too.

lukutis222

@JonB
Sure, I can use QPixmap to dispaly an icon:

This method uses QLabel to replace with icon:

    QPixmap* pixmap =new QPixmap (":/icons/green_circle.png");
    ui->test_label->setPixmap(*pixmap);
    ui->test_label->setScaledContents(true);

Is this a common way to do this in QT? If I just want to display an Icon, I would create a label widget and just replace it icon?

Additionally, My image does not actually seem to have transparent background even though when I open it using image editor it shows as transparent.

I have set QLabel background color to test it out:

The result:

I would have expected to see green circle in yellow background

SGaist

@lukutis222 said in Using relative path for image:url in stylesheet:

QPixmap* pixmap =new QPixmap (":/icons/green_circle.png");
ui->test_label->setPixmap(*pixmap);
ui->test_label->setScaledContents(true);

Don't create the QPixmap on the heap, there's no need for that.

As for your other question, QLabel is a class made to show text or images so yes, it's pretty common to use it to show images like that. You could also implement your own subclass that paints the image but there would not be much benefit from that.

JonB

@lukutis222 said in Using relative path for image:url in stylesheet:

I would have expected to see green circle in yellow background

Does your green_circle.png have transparent background?

lukutis222

@SGaist
Okay. Thanks for clarifying :)

lukutis222

@SGaist I am pretty sure it does. But it does not seem transparent when I use it as icon in QT.

I was expecting it to inherit whatever the background the QLabel is set to.

CPPUIX

@JonB said in Using relative path for image:url in stylesheet:

my comment is not intended to "criticise" you.

I appreciate any feedback I can get, thank you!

I can see your point, which made me doubt my past experiments and understandings, as I'm still at the beginning of my learning journey.

So I made a little experiment. I created a new project with a check box, used OP's styelsheet, with my suggested relative path:

image: url(../icons/green_circle.png);

I then made a whole new directory separated from the project folder, and created a folder called executableFolder, and one called icons. When I run the executable (copied from the build directory), the stylesheet works.

Here are the directories:

user@user:~/Desktop/UnrelatedDir$ ls
executableFolder  icons
user@user:~/Desktop/UnrelatedDir$ cd executableFolder/
user@user:~/Desktop/UnrelatedDir/executableFolder$ ls
relativePath
user@user:~/Desktop/UnrelatedDir/executableFolder$ cd ../
user@user:~/Desktop/UnrelatedDir$ cd icons/
user@user:~/Desktop/UnrelatedDir/icons$ ls
green_circle.png  red_circle.png

relativePath is the executable.

Also, I made sure those images exist nowhere but in icons folder in the UnrelatedDir directory.

Is this the correct experiment to demonstrate how relative paths work? If not, what should I change or try, in order to properly understand how it works? And is there something I should be aware of, that I seem to be ignorant about?

JonB

@Abderrahmene_Rayene said in Using relative path for image:url in stylesheet:

Is this the correct experiment to demonstrate how relative paths work?

No! This demonstrates what you already have/know from Creator. Because of your cd executableFolder/ you are precisely making sure the current directory HAPPENS to be where the executable lives. This is also how Creator runs your app. So ../icons/green_circle.png is correct just for this case.

But you don't know where the user might be when they run your app. All you have to do to test is what I wrote above:

cd /tmp
~/Desktop/UnrelatedDir/executableFolder/relativePath

Now does it still pick up the green_circle.png?

CPPUIX

@JonB No it does not, and I get it now.

In my case I made the executable's directory the working directory by navigating towards it and executing it by clicking on it in a file manager.

To demonstrate that I understood, I copied the icons folder into tmp, and ran your command again, and it found green_circle.png.

I think I understand now, Thank you!

JonB

@Abderrahmene_Rayene said in Using relative path for image:url in stylesheet:

by navigating towards it and executing it by clicking on it in a file manager

Indeed, but that probably depends on your File Manager/OS. And after a while you/the user may set up a "shortcut" icon for the executable on the desktop and double-click that. Now what is the current directory when it is launched? Each OS/File Manager has its own settings or rules.

So how can we locate supplied external files? One possibility that suits your case is to use QString QCoreApplication::applicationDirPath() to find where the executable is. If you installed the icons directory there or thereabouts you might append icons/ or ../icons/ to that path to locate the .png. That is OK from code, but you can't pass anything suitable to the original stylesheet's url(...) for this case. You might cd there from within your application's code, so that relative works like it does from Creator, but that has consequences, plus it can break QCoreApplication::applicationDirPath().... [Oh, and also it won't for Qt Python applications.]

The upshot is, especially for this url(...) syntax, you are probably best off switching to Qt's resources to supply your icons instead of as external files, as @SGaist suggested and @lukutis222 has now adopted.

P.S.
What would really be better is if Qt "QSS" stylesheets either defined where url(...) sought relative paths somehow relative to where the executable is or some environment variable specifies, or added an extra syntax in url(...) to refer to the executable directory. If we were in HTML with CSS sheets, I believe relative paths are from where the page being viewed is located, and/or an absolute URL /... refers to the virtual root directory of the application, so one can work with that.

CPPUIX

@lukutis222 Could you share green_circle.png file? and the style sheet you're applying to your label?

I tested with a random green circle icon with a transparent background, and a yellow background for the label, and it works.

Here's how it looks:

and here's the image I used, and its link:

lukutis222

@Abderrahmene_Rayene
Sure. The image is attached:

You should be able save it as image.

Regarrding the label:
I have simply created a label, adjusted its size and added stylesheet background color:

In the code I do:

    QPixmap pixmap = QPixmap (":/icons/green_circle.png");
    ui->label_5->setPixmap(pixmap);
    ui->label_5->setScaledContents(true);

Result

I have then tried the same thing again just instead using my green_circle, I used your green_circle. That seems to work fine!
.

I wonder what is exactly t=the problem with my image. It seems transparent but its not!

It is also worth mentioning that this is not just one image that I have issues with. I use many transparent images that does not actually seem to be transparent. Another example is this icon:

CPPUIX

@lukutis222 it seems this has nothing to do with Qt.

How are you downloading these images? What's their source?