Hopefully the last time: round buttons

[auba]

Yesterday I found a thread with "how to shape QPushbutton" and something like

QIcon icon("myicon");
..dontknow...setMask(icon.getMask);

and now I am searching again and find lots of "shapings" and "round widgets", but not the mentioned code

So, can we do it one more time and then put the infos into the wiki? Round Buttons (or similiar)?

In Qt3, it was like

void TGuiObject::setBitmap(QWidget* w, const QString& file)
{
        if( !file.isEmpty() && QFile::exists(file) ) {
            QPixmap pix(file);
            if( QFile::exists(file+fileMask) )
                pix.setMask(QBitmap(file+fileMask));
            QPalette pal;
            pal.setBrush(w->backgroundRole(), QBrush(pix));
            w->setPalette(pal);
        }
    }

void TGuiObject::setBitmap(QWidget* w, const QString& file)
{
        if( !file.isEmpty() && QFile::exists(file) ) {
            QPixmap pix(file);
            if( QFile::exists(file+fileMask) )
                pix.setMask(QBitmap(file+fileMask));
            QPalette pal;
            pal.setBrush(w->backgroundRole(), QBrush(pix));
            w->setPalette(pal);
        }
    }

To copy to clipboard, switch view to plain text mode 

wasn'it?

I wanted the Starfleet logo to be the button. When I click it with the above code, it is not really shaped... it is still a rectangle with white corners around the round image...

[aamer4yu]

Check your bitmap, if its really transparent around the white area u get in ur button.
setMask will operate on the opaque pixels, and if all pixels of you bitmap is opaque, you will get the result you ae now getting.

[auba]

Ok, so I have to change from .jpg to .png. No problem. Now I have a round bitmap, thanks for that.
But when I click the button, I see only a grey background.

I read something about the style sheet property "border-radius" in the other thread - and the helps says "not available on Mac". Do I really have to reimplement the paint event?

[aamer4yu]

Have you set any style sheet on button press ??
How are you using the button ?

[talk2amulya]

i think stylesheet property "border-image" could very well solve the problem, but in that case, your image should only be that round thing, there shouldnt be any transparent white area around

[auba]

Have you set any style sheet on button press ??
How are you using the button ?

Until now, I did not use any style sheets, as the help says, that styles on Mac currently don't work. So I'd like to set the "basics stuff" by QPushButton's methods... my code is above, I only added the shaping mask function.

i think stylesheet property "border-image" could very well solve the problem

Just to be sure, I changed it into the following code:

if( !file.isEmpty() && QFile::exists(file) ) {
  QString style = w->styleSheet();
  style += QString("background-image: url(%1);").arg(file);
  style += QString("pressed: background-image: url(%1);").arg(file);
  w->setStyleSheet(style);
  if( QFile::exists(file+".mask") ) {
     QBitmap mask(file+".mask");
     w->setMask(mask);
  }
}

if( !file.isEmpty() && QFile::exists(file) ) {
  QString style = w->styleSheet();
  style += QString("background-image: url(%1);").arg(file);
  style += QString("pressed: background-image: url(%1);").arg(file);
  w->setStyleSheet(style);
  if( QFile::exists(file+".mask") ) {
     QBitmap mask(file+".mask");
     w->setMask(mask);
  }
}

To copy to clipboard, switch view to plain text mode 

and I now see... well... some kind of bitmap

[wysota]

The simplest way to obtain what you want is to make the png image transculent so that the transparency "blends" into the image. Then you can use QPixmap::createHeuristicMask() or QPixmap::createMaskFromColor() to get the mask and to be sure you won't have any sharp edges on the button.

There is also an alternative - subclass QPushButton or QAbstractButton and do the painting yourself.

[auba]

I think I am nearby. I converted the "white" to "transparent" and saved it as png. I set the mask with the code of my first writing, and the button is displayed round. Obviously, setting the brush with an image an its mask is ok.

The only problem left is that the pressed has neither a background nor a text, so all I get is a grey pressed button rectangle. Obviously, I have to set the brush of the pressed-background role. But I do not know how?

Maybe I really should paint it on my own, to ensure that the button looks like it was pressed down a little bit?

[aamer4yu]

And what stylesheet are u using for "pressed" state ?

[auba]

QWidget::styleSheet : QString
...
Note: Qt style sheets are currently not supported for QMacStyle (the default style on Mac OS X). We plan to address this in some future release.

-> there must be an option without stylesheets, mustn't it? Currently, I am working on even that OS

[wysota]

there must be an option without stylesheets, mustn't it?

Sure there is. I even gave it to you...

[auba]

Sorry, but I did not understand it... to clearify: do I have to paint the button on my own to get the needed result (pressed button with picture)?

Or does it make a difference if I use the QPixmap::mask() function instead of the createHeuristicMask as you wrote?

As I wrote as the response to your help: the only thing left is the undrawn picture when pressing down.

[wysota]

The best and probably fastest way to achieve what you want is to provide your own button class. It's essentially less than 10 lines of code if you're only after drawing and less than 15 lines of code if you also want the hit area of the button to be shaped.

[Kal]

Is the problem only with QMacStyle? What you pasted, auba, states that it is the default style on the mac. Can you just set the default style to Plastique or Cleanlooks?

While I've built a qt application on/for OS X, it was in Cleanlooks and didn't use any stylesheets (and was quite awhile ago) so I'm unsure of the actual behavior. Can OS X run a different Style?

[freezeblue]

I wonder why you guys not try to use QPushButton::setFlat(true) and add a PNG as its icon.
I think it is the easiest way to create shaped button and it's platform independent.

Here's my widget. Look at the bottom-right buttons:



Is it what you want?