Widget with rounded edges

[gruszczy]

I have an image for my startup window (shown, when app loads some stuff), that have rounded egdes (stylish, you know). By rounded edges I mean, that an image is of course rectangular as a whole, but what is seen in the image (a frame with app name, author, version) has rounded edges. Is there any trick to display it and keep those rounded edges, which means creating widget with rounded edges?

[wysota]

Sure - QWidget::setMask() together with QSplashScreen probably.

[gruszczy]

This is cool and looks cool! Thanks

One more question: I've put my splashscreen into a widget, to make about window. Setting mask works fine, but I still have frame and top bar with -,x and title etc.

[wysota]

You have to use setMask() on the top level window. And if you want to get rid of the title bar, set Qt::FramelessWindowHint on the window.

By the way, don't use the splash screen if you don't intend to make it a window, use a regular widget instead.

[gruszczy]

Works perfectly! Thanks a lot :-)

[montylee]

i have a similar requirement. I have a rectangular window with a transparent background. The transparent background has rounded corners. When i run the application the window corners are not rounded.
Do i need to use setMask? If yes, then how to use setMask exactly?

[aamer4yu]

What Qt version are you using ?
From 4.5 there is a new attribute Qt::WA_TranslucentBackground , try to set it and see if things get better

[richardander]

My splashscreen has no background. If I would like to have the splashscreen to be half transparent, could you let me know what to do?

I tried the above Qt::WA_TranslucentBackground, my splashscreen window is all black ...


Thank you!

[wysota]

Did you try using setMask()?

[montylee]

What Qt version are you using ?
From 4.5 there is a new attribute Qt::WA_TranslucentBackground , try to set it and see if things get better

I am using Qt 4.4. I think even using Qt::WA_TranslucentBackground won't help as richardander mentioned that his splash screen window has gone all black after using this attribute.

I think this is a generic problem in Qt4+ versions. Before Qt 4, it was possible to make top level window transparent and also have rounded edges, With Qt 4+, everything is dependent on X11 so X11 needs to have the composite extention then only you can achieve transparency and rounded corners in top level window.

In my case, i have a transparent png with rounded corners which i use as the top level window background. When i run my application above a terminal or black background, i can see the rounded edges but otherwise i don't see rounded edges as the window manager fills the black color in the window corners, so the rounded corners can be seen only against the black background.

Don't know what could be a workaround for this problem. Maybe, i'll get a png with rounded corners. and instead of transparent corners, the corners will be filled with the same color as my background application so it'll appear to have rounded corners.

Is it possible to use setMask on a top level window so that it appears to have rounded corners?

Edit: just read in this thread that @gruszczy was able to have rounded corners in the top level window using setMask. Can someone please post a sample code for setMask. I don't have any idea about setMask.

[montylee]

I managed to get rounded corners on a top-level window using setMask. Here's the code for the same:

int main(int argc, char* argv[])
{
    QApplication a(argc, argv);
    QLabel* label = new QLabel();
 
    QPixmap pixmap("background.png");
    label->setPixmap(pixmap);
    label->setMask(pixmap.mask());
 
    label->setFixedSize(pixmap.width(), pixmap.height());
    label->setWindowFlags(Qt::FramelessWindowHint);
    label->move(100, 100);
    label->show();
    return a.exec();
}

int main(int argc, char* argv[])
{
    QApplication a(argc, argv);
    QLabel* label = new QLabel();
	
    QPixmap pixmap("background.png");
    label->setPixmap(pixmap);
    label->setMask(pixmap.mask());
   
    label->setFixedSize(pixmap.width(), pixmap.height());
    label->setWindowFlags(Qt::FramelessWindowHint);
    label->move(100, 100);
    label->show();
    return a.exec();
}

To copy to clipboard, switch view to plain text mode 

The background.png is transparent and has rounded corners and when i run the application, i can see rounded corners properly.

Now, the problem is how to integrate this in my code? In the above example, label is the main application widget which acts as a window, so it displays rounded image properly.
In my code, i have a custom class derived from QWidget and i display that widget using show() function. Now, when i put the above code in the constructor of my custom class, i get the background but i don't get rounded corners properly. I can see the rounded corners but the corners get filled with white color and the application appears to have rectangular corners.

Am i setting the background of my application window properly. Is this the proper way of setting background image of a window. Here's what i am doing:

1) Create a QLabel in the contructor of my class.
2) Set a background image on the QLabel.
3) Resize the QLabel to be of same size as that of the background image.
4) Resize the application window to be of same size as that of background image.
Here's the code i have:

m_pbackgroundLabel = new QLabel(this);
m_pbackgroundLabel->setPixmap(m_pmAlbum);
m_pbackgroundLabel->setMask(m_pmAlbum.mask());
m_pbackgroundLabel->setFixedSize(m_pmAlbum.width(), m_pmAlbum.height());
 
// Set the window size to be same as the backround image size
setFixedSize(m_pmAlbum.width(), m_pmAlbum.height());

m_pbackgroundLabel = new QLabel(this);
m_pbackgroundLabel->setPixmap(m_pmAlbum);
m_pbackgroundLabel->setMask(m_pmAlbum.mask());
m_pbackgroundLabel->setFixedSize(m_pmAlbum.width(), m_pmAlbum.height());

// Set the window size to be same as the backround image size
setFixedSize(m_pmAlbum.width(), m_pmAlbum.height());

To copy to clipboard, switch view to plain text mode 

m_pmAlbum contains the background image and is of type QPixmap.

Using setMask doesn't make a diference in my application although it works in the sample application i posted.

[aamer4yu]

Sorry, I didnt pay attention that you are using X11...
Qt::WA_TranslucentBackground was meant for windows I guess.. still if i get time, will try this rounded edge thing...

[montylee]

i'll try to post a working example which reproduces my issue.
If anybody has an idea about this please post...

[montylee]

ok, i was able to make my application's window corners round
In the code which i posted, i was setting the mask of the QLabel which was incorrect.
I had to set the mask of the application window and it worked.

[aekilic]

Has any boys tried this in 4.5.1,

I use 4.5.0 and when I use Qt::WA_TranslucentBackground and I get a black screen for my splash? any body can help?