[Solved] How to add Graphic with transparency as Button



  • Hi

    I need to have buttons that actually only consist of a graphic with transparency, or the other way round: Graphics with transparency that can be pushed like buttons. I do have the graphic in multiple versions like normal, selected, pushed .. and more.

    I'm using 4.6.3, end target is on embLinux, developing on Windows.

    How do I implement this?
    Thanks and best regards,
    McL


  • Moderators

    I think you need to take a look at "QAbstractButton":http://qt-project.org/doc/qt-4.8/qabstractbutton.html. Alternatively, you can consider switching to Qt Quick, it's better for embedded systems.



  • OK, thanks.

    I'm kinda new to Qt ... and dont get it to work.

    • I added a PushButton (180x180)
    • Added a Icon to the Button (180x180 png with some transparency) that is shown in the Designer
      When starting on the desktop the button is shown but I dont see the icon. What am I doing wrong?

    McL


  • Moderators

    uh-uh. No guessing here. Show us your code :D or at least tell us how you did it.

    I don't think I've ever tried to put an image onto a button, so I probably won't be of much help anyway.



  • @<widget class="QPushButton" name="IconPushButtontest">
    <property name="geometry">
    <rect>
    <x>330</x>
    <y>370</y>
    <width>180</width>
    <height>180</height>
    </rect>
    </property>
    <property name="cursor">
    <cursorShape>PointingHandCursor</cursorShape>
    </property>
    <property name="text">
    <string/>
    </property>
    <property name="icon">
    <iconset>
    <normaloff>images/Pfeil rechts oval.PNG</normaloff>
    <normalon>images/Pfeil rechts oval.PNG</normalon>
    <activeoff>images/Pfeil rechts oval.PNG</activeoff>
    <activeon>images/Pfeil rechts oval.PNG</activeon>
    <selectedoff>images/Pfeil rechts oval.PNG</selectedoff>
    <selectedon>images/Pfeil rechts oval.PNG</selectedon>images/Pfeil rechts oval.PNG</iconset>
    </property>
    <property name="iconSize">
    <size>
    <width>180</width>
    <height>180</height>
    </size>
    </property>
    </widget>@



  • 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.



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



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



  • 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.



  • 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.



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



  • [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.



  • 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.



  • 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


  • Moderators

    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.


  • Moderators



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



  • 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.



  • 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).



  • 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



  • 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.



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

    Thanks, Franz



  • 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.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.