Using an image as a slot for GridLayout

[BernWillChris]

Hi Qt Programmers,

I was trying to insert a Pixmap image into a gridlayout, but unfortunately, the gridlayout didn't support the object type that I was trying to pass by. How do you go about inserting an image? Also, I been focusing a lot on Qt quick lately, but decided to head back to dealing with widgets because of the easy access to C++ code. There are somethings that I miss such as embedding object texts to a rectangle. The embedding allowed me to be very creative with designing the user interface. Do you know of any tricks that I can use to embed objects on top of other objects? I'm sure there will be a situation that comes up sooner or later that might be appropriate for this situation. The final thing I would like to add is how do I link an external .css file so that my code can talk with it? Almost like the way it is done in Javafx for java.

Thanks so much for your response.

[mrjj]

Hi
To Insert a pixmap to a layout, you can use a QLabel.
It accepts an image.

Im not sure how you mean "embed objects on top of other objects".
A Widget is a object and at such , do not mix easy with others as you
can do in Quick.

external.css file

It is just a text file so you can load it.
or you and add it to the RC file and use a path like
":/qss/qmenu.qss"

QString AppStyle::GetStyleSheetAsSting( QString Path ) {
    QFile file(Path);
    int res=file.open(QFile::ReadOnly  | QIODevice::Text );
    QString styleSheet = QLatin1String(file.readAll());
    return styleSheet;
}

then

QString mystyleSheet  = GetStyleSheetAsSting("fullpathtoyourfile")
win->setStyleSheet ( mystyleSheet  );

[BernWillChris]

@mrjj

Thanks!! That was very helpful.

I was able to get the image to work with the file located on my desktop. When I try to add the image to my project in the source folder, Qt Creator would automatically add it to "Other files" folder. I tried multiple combinations and couldn't get it to correctly link to the file located in my project. As far as the .qss file, I got lucky and guess what to put into the file and it worked. It was simple, but it would be great if I can find some information online that can tell me how to layout the code. For instance, all I put into the .qss file was:

QPushButton { color: red; background-color: blue }

and then I called this in the main body:

button1->setStyleSheet (QLatin1String(file.readAll()));

and that button had a blue background with red text. But what if I wanted different buttons to have different properties? That is a problem that I haven't solved as of yet. Thanks!! :)

[mrjj]

@BernWillChris
Yeah, i fooled around with Other for a while too :)

To add stylesheet file as a resource, (have it as part of the project)
one must first add a qrc file
and then add the stylesheet file to that one qtc "folder"

So select New , the QT type in left side, and qt resource file in center .
Then you get a Resource folder and u can right click and select "add file"

Now you can load inside the program with the ":/" format.
Note: you can right click the file when in the qrc, and get the path.

Or you can put the stylesheet file with you exe. ( debug folder first)
and get path to it with
QString filename = QCoreApplication::applicationDirPath() + "/" + "mystylesheetfile.qss";

http://doc.qt.io/qt-5/stylesheet-reference.html
is your friend for the syntax.

Also, inside the form editor, you can right click a widget and select change stylesheet. there you
get a nice editor than can insert stuff and that way you can see the syntax.

If you apply the stylesheet to the main window, it applies to all object it owns/contains which is most.
So instead of give widgets their own sheet, it is easier to load into mainwindow and control it all from
one file. ( or at least i thinks that )

For that work you must use ClassName in the qcc
like you did.
QPushButton { color: red; background-color: blue }

To target one, u can use name
QPushButton #Name_of_widget { color: red; background-color: blue }
note the space before #

[BernWillChris]

@mrjj

Okay!!

Unfortunately, I'm not allowed to upload images, so I found a place to host my image and you can take a look at my workspace @
http://tinypic.com/r/34hxgtz/8. This page loads up very slow and have a ton of ads. I'm sorry about that. I just did a quick google search and this is what I found.

I had already tried what you mentioned with both the path route and the url route with no success. I guess why we at it, how do I go about increasing the Pixmap size too?

Also, in case you care, I was able to figure out how to embed an object on top of another object which was something that I asked in my previous question. Lets say you want to have a nice background for a screen to your calculator app. You want a nice light-blue background with very light gridlines. You can load up the image of that screen using Pixmap by attaching it to a label and finally stick that label into a gridlayout. Lets say it was row 0 and column 0. If you would like to have some text over that layout to communicate with the user, you can simply use a label again and have it at the same position, which is row 0 and column 0. That is one situation that maybe useful. It might have been a better way of doing that, but you get the point :).

[mrjj]

Hi
No problem. loads ok fast but yeah billions ads :) free and awful. whats not to like.
No one can upload pic here. :(

I had already tried what you mentioned with both the path route and the url route with no success

You can add the stylesheet to image.qrc.
and if you then right click the sheet and select "Copy Path" and use that
it will still not work for you ?
100% like the software.png you load, just with qss file.

how do I go about increasing the Pixmap size too?
have at look at

QPixmap QPixmap::scaled(int width, int height, Qt::AspectRatioMode aspectRatioMode = Qt::IgnoreAspectRatio, Qt::TransformationMode transformMode = Qt::FastTransformation) const

Note , it returns a new pixmap so do
qPixMap = qPixMap.scaled(...

Ahh, now I understand what you meant with "embed objects on top of other object"