[Solved] How to add Graphic with transparency as Button

andre

Sounds to me like you need to use stylesheets instead. Setting the icon will not change the button itself, it will only change the image on the button.

McLion

But I even dont see the icon on the button when executing the app.

andre

Are you sure your images can be found at the locations you indicate?

McLion

It is perfectly shown in the designer. When hitting Run (Ctrl+R) the button is shown without icon on it. I tried with a label too. The same applies. Text on the Button or Label is shown, but not the graphic (icon or pixmap) when running.

andre

So, it is a path issue. You are using a relative path, and that path is obviously not valid when running your app. Your app is probably build in a different directory than your sources, and that is A Good Thing(TM).

I would suggest you put your images in a resource, and use the images from the resource instead.

McLion

... excuse me to ask ... and how am I going to do this "resource thing" ?

andre

[quote author="McLion" date="1348136708"]... excuse me to ask ... and how am I going to do this "resource thing" ?[/quote]

Well, did you look in the documentation under, eh... I don't know, "resource"? Did you locate the page called "The Qt Resource System" there? No? Please look (again) then. Otherwise: what is it you don't understand from that page?

Also note that Qt Creator makes adding, modifying and using resources trivial. Ctrl + N -> choose Qt under "Files and Classes", and choose "Qt Resource File" from the list on the right. Then start adding your files. The files you added, will then be available from designer as well when you need to set an icon.

McLion

I was looking around in the creator for "resources" ... but I did miss the resource entry in the "New" dialog. I'll post back if it works.
Thanks a lot for the guidance and your time.

McLion

OK. Got the icon on the button. With a style sheet I even got the transparency.
What I am stuck with is to disable the border. I can set the "flat" property and that removes the border, as long as the button is not pressed. When it is pressed, the border is back.

How do I get rid of the border permanently?
Changing the icon on like "mouseOver" events are not available in Creator and need to be done in code, right?

I need the button to have its defualt icon, changing to a different one when/as long as selected by tab (found this, works) or a mouseOver event, and having a third one as long as it is pressed (probably the pressed slot).

Thanks
McL

sierdzio

You are probably better off subclassing, and doing your own painting, then (see "QWidget::paintEvent()":http://qt-project.org/doc/qt-4.8/qwidget.html#paintEvent). To enable hovering, you need to turn on mouse tracking (::setMouseTracking), otherwise it will not get "mouse move events":http://qt-project.org/doc/qt-4.8/qwidget.html#mouseMoveEvent.

sierdzio

I forgot to mention mouse "enterEvent":http://qt-project.org/doc/qt-4.8/qwidget.html#enterEvents and mouse "leaveEvent":http://qt-project.org/doc/qt-4.8/qwidget.html#leaveEvents.

andre

You can do it in code, or in CSS. Using CSS also support hover.

McLion

Buuuh ... I am new to Qt, C++ and CSS ... I only have some years of experience in C.

So, I'm still trying step-by-step to get an idea.

This got me the transparency and removed the border (except for the dotted one from the indication where the focus currently is):
@ui->IconPushButtontest->setStyleSheet("background-color: transparent;");
ui->IconPushButtontest->setStyleSheet("border: 0;");
@

To have a different image while the button is pressed I tried this:
@void QTGUI_MainWindow::on_IconPushButtontest_pressed()
{
ui->IconPushButtontest->setIcon(QIcon(":/ab "));
}
@

but this is not working, and the GUI in the Creator does not allow to set for events like pressed or hover.

So, I am still not sure what's the best way to have this implemented for a couple of buttons which all have different images.

andre

The two setStyleSheet lines overwrite onanother. You set a stylesheet as one huge string. Selecting different images to put on top is also possible in a style sheet, as you can change any property of the widget you are styling in the stylesheet, and you can refer to images by path (I would suggest to use a resource for that).

McLion

Thanks .. got that ..
ui->pushButtonIcon1->setStyleSheet("background-color: transparent; border: 0;");
worked.

Can I apply a stylesheet to all items like QPushButtons, or a Subclass like
class GraphicButton : public QPushButton instead of applying to every button?
I also could not find a way to make Pushbuttons created in the Designer to be part of class GraphicButton instead of the the default QPushButton.

Is there a way to get rid of the dotted line around the button?

Thanks
Franz

utcenter

What you want to do is very simple - just overload a QWidget's paint event to draw a QImage according to the state of the "button" which you control through the different mouse events. Don't do it any harder than it needs to be just because it is technically possible.

McLion

.. never "overloaded a QWidget" ... sure I'll find some docs about it.

Thanks, Franz

utcenter

Overloading is not specific neither to QWidget nor to Qt, it is a C++ feature that allows you to replace a method of a given object. You just inherit from QWidget, reimplement the paintEvent so that instead of doing whatever QWidget does to paint what you want - an image based on the state of your button.