adding an object to a Designer-made UI

[Chris Kawa]

I've created a resource and added a .jpg file to it. Is the QImage object a sensible choice for holding the graphic?

A QPixmap might be a better choice because it can be directly put on a label. See below.

anyone know of a reason that there isn't a QImage option in Designer mode?

Yup. Might seem strange at first, but QImage is not a ui type object. Not a widget nor QML item. It's an object storing data that a widget, a QML item or something else can use to draw. Other uses are OpenGL textures or offsceen buffers.
It has no graphical designable representation on its own. Structurally it's closer to QVector than to a QWidget.

how do I programmatically add an object (like a QImage) to the ui widget that Designer creates for me?

For static images the simplest way is to add a QLabel and set a QPixmap on it using its setPixmap() method. It can also be done directly in the designer. Just place a label and point its pixmap property to a resource or file path.

[mzimmers]

Thanks, Chris. I did think it was somewhat odd that the QImage was a peer of QObject, not QWidget. I've implemented your suggestion and replaced the QImage with a QLabel/QPixmap, and I now get the logo.

I now need to scale the logo so its width is half the main widget (or the same as the title label, which will be located to the logo label's right). I've selected the scaledContents box in Designer, and set the stretch on the two labels to 50. But when I run, the UI tries to display an unscaled (very big) logo. What did I miss?

~~Also, I tried to do this programmatically, but I got a segmentation fault on the setPixmap() call. Here's my code:

QPixmap *logo;

logo = new QPixmap(":/logos/logo.jpg");
logo->scaledToWidth(logo->width());
ui->logoLabel->setPixmap(*logo);

What did I do wrong here?

Thanks...~~

Edit: disregard the last question above; I realize now that I have to call setupUI() first.

[Chris Kawa]

disregard the last question above; I realize now that I have to call setupUI() first.

So a couple notes here:

• You created a memory leak. logo is not released. As I mentioned before - QImage is more like a QVector than a QWidget (or QObject for that matter). Create it on the stack.
• scaledToWidth returns a new object, not modifies the one you call it on, so you need to assign it to something.
• logo->scaledToWidth(logo->width()); scales an image to its current size (so doesn't scale at all).

So it should be something more like:

QPixmap original_logo(":/logos/logo.jpg");
QPixmap scaled_logo = original_logo.scaledToWidth(someWidget->width());
ui->logoLabel->setPixmap(scaled_logo);

Note that the widgets don't have valid sizes until they are first shown, so if you're calling it in a constructor the call to width() of this widget will return 0. You need to call this code from somewhere where the width is already valid, like the showEvent override.

[mzimmers]

@Chris-Kawa good information, Chris. So, the takeaway on the QPixmaps is: once the QLabel uses the information in the QPixmap, the QPixmap is no longer needed...is this correct? And that's why we can create it on the stack?

I haven't gotten to this point yet, but if I wanted to build an app that could run on a variety of platforms, it's my understanding that I should let Qt have as much control over the size of the widgets as possible (please correct me if I'm wrong). If this is true, then how should I obtain the value for the width setting? Obviously I don't want to hard code it...could I take the width of the container object and divide by 2? I'm still a sizing newbie, but I first thought that using the stretch settings would take care of this, but that doesn't seem to be the case.

I appreciate the help.

[kshegunov]

@mzimmers said in adding an object to a Designer-made UI:

So, the takeaway on the QPixmaps is: once the QLabel uses the information in the QPixmap, the QPixmap is no longer needed...is this correct? And that's why we can create it on the stack?

Close but not exactly. QPixmap, QImage, QVector, QMap and such are all implicitly shared, so the data is actually shared between different objects - the objects just hold a "claim" on using at some point. When there are more than one object that references that data and one of them wants to modify it, Qt will "detach" it, meaning it will copy the data and give the new copy to the object that wants to modify it. This way Qt avoids unnecessary copies of big chunks of data and at the same time allows you to use objects as regular C++ types. The above means the fastest and safest way to create these kinds of objects (i.e. the ones that are implicitly shared) is on the stack.

If this is true, then how should I obtain the value for the width setting?

This you could do by handling the appropriate events your widget receives. For example, as Chris already mentioned, the show and hide events, resize events or paint events. Some of the events (there are a lot of them) are so important that there are dedicated virtual functions you could override to handle that specific type of event, e.g. QWidget::showEvent, QWidget::resizeEvent, QWidget::paintEvent, etc.

[mzimmers]

I'd like to return to this subject, at a bit higher level. Let's say I'm writing a new app that can build and run on a variety of platforms, with widely varying screen resolutions.

Is it possible/advisable to write an app that doesn't specify any absolute sizes at all? In other words, can/should I allow Qt to make all of these decisions for me? And if so, what do I use to convey general guidelines to Qt, such as how much of the screen to consume, aspect ratio of the main window, etc?

I know these are vague questions...this is because I don't know what I don't know.

Thanks...

[mrjj]

@mzimmers
Hi
If you design your application with layouts
http://doc.qt.io/qt-5/examples-layouts.html
you are able to specify how you want the app to use the available space
for a given device. You can then use bitmap of multiple resolutions or SVG
to allow crisp viewing without scaling artifacts.
Each widget can specify how it should be scaled. Like keep to minimum
or take all space. This is controlled by
http://doc.qt.io/qt-5/qsizepolicy.html

[mzimmers]

@mrjj thanks for that link...I now understand size policy and size hints a lot better (though I'm going to have to experiment a little to fully grasp them).

I did read something that confused me, in the explanation of SizePolicy::Expanding, it says:

The sizeHint() is a sensible size, but the widget can be shrunk and still be useful. The widget can make use of extra space, so it should get as much space as possible (e.g. the horizontal direction of a horizontal slider).

Shouldn't "shrunk" be "expanded" here?

[kshegunov]

@mzimmers said in adding an object to a Designer-made UI:

Shouldn't "shrunk" be "expanded" here?

Nope, they mean that sizeHint() doesn't impose any restriction on the minimal size of the widget (contrary to QSizePolicy::Minimum). It's just a way to suggest what an appropriate size would be, from there on the widget will try to grab as much as it can, but it can be also shrunken if that's needed for the layout management.

[mzimmers]

@kshegunov oh, I see (I think) -- it means it can grow or shrink, and it should grow if it can, right?

So, if you had a widget that you wanted at least a certain size X, but you wanted it at X*2, or even more if necessary, you'd use this setting, right? And set the minimum size to X?

[kshegunov]

Yes on both counts.

[mzimmers]

Hey, this is pretty cool stuff once you get used to it. I was expecting a lot more hassle based upon reading through the documentation, but once you start, it's not bad at all.

I have a few random issues currently:

1. my main widget has a vertical layout with 4 areas in it. Can I control the order (top to bottom) of these areas through object properties, or do I have to drag and drop?

2. What is the setting on a QLabel to ensure that all the text is visible?

3. I'm using another QLabel to display a SVG pixmap of our logo. How do I preserve aspect ratio during scaling?

Thanks...

[mrjj]

@mzimmers

Hi
Yeah layouts are first pretty annoying and later it seems kinda natural.

1. The insertion order will give the order. Not sure you can swap them runtime with code.
   Normally you drag and drop to rearrange.

2. you can enable word wrap. It will not scale the font used. That must be hand programmed if desired.

3. Make small custom class based on QLabel that uses
   http://doc.qt.io/qt-5/qpixmap.html#scaled
   and Qt::KeepAspectRatio
   You can google it. Not an uncommon question.
   https://stackoverflow.com/questions/8211982/qt-resizing-a-qlabel-containing-a-qpixmap-while-keeping-its-aspect-ratio

[mzimmers]

@mrjj thanks for the answers. I'm a little surprised by your answer to #2...if this is true, maybe I'm not using the best object. The goal was to have two QLabels (side by side) at the top of my main widget. On the left would be our logo, while on the right would be a title. I was hoping that the size of the title label would auto expand to show the entire text of the title. Is there a better way to do this?

Also, I think as an alternative to creating a a custom class for #3, I can just modify the object properties...yes?

[mrjj]

@mzimmers
Hi
If there is room for the text, it will work. If not enough room and no wordwrap, it will just cut the text.
Im not sure how it should fit the text if no room ?

About 3:
What properties do you think of ?

[mzimmers]

@mrjj I was hoping that some display widget could auto-size to reveal all of its text on a single line. This may be asking for too much.

Regarding the logo, I'm doing this right now:

    ui->logoLabel->setPixmap(logo.scaled(logoSize, Qt::KeepAspectRatio, Qt::SmoothTransformation))

I'm still working with it (the image quality is currently poor) but I don't see the need for a custom class.

[mrjj]

@mzimmers
Hi
None of the widget will reduce the font point size used.
So if that what you mean with auto-size, then nope.