Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. [Solved] How to add Graphic with transparency as Button
Forum Updated to NodeBB v4.3 + New Features

[Solved] How to add Graphic with transparency as Button

Scheduled Pinned Locked Moved General and Desktop
23 Posts 4 Posters 12.7k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • A Offline
    A Offline
    andre
    wrote on last edited by
    #6

    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.

    1 Reply Last reply
    0
    • McLionM Offline
      McLionM Offline
      McLion
      wrote on last edited by
      #7

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

      1 Reply Last reply
      0
      • A Offline
        A Offline
        andre
        wrote on last edited by
        #8

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

        1 Reply Last reply
        0
        • McLionM Offline
          McLionM Offline
          McLion
          wrote on last edited by
          #9

          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.

          1 Reply Last reply
          0
          • A Offline
            A Offline
            andre
            wrote on last edited by
            #10

            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.

            1 Reply Last reply
            0
            • McLionM Offline
              McLionM Offline
              McLion
              wrote on last edited by
              #11

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

              1 Reply Last reply
              0
              • A Offline
                A Offline
                andre
                wrote on last edited by
                #12

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

                1 Reply Last reply
                0
                • McLionM Offline
                  McLionM Offline
                  McLion
                  wrote on last edited by
                  #13

                  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.

                  1 Reply Last reply
                  0
                  • McLionM Offline
                    McLionM Offline
                    McLion
                    wrote on last edited by
                    #14

                    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

                    1 Reply Last reply
                    0
                    • sierdzioS Offline
                      sierdzioS Offline
                      sierdzio
                      Moderators
                      wrote on last edited by
                      #15

                      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.

                      (Z(:^

                      1 Reply Last reply
                      0
                      • sierdzioS Offline
                        sierdzioS Offline
                        sierdzio
                        Moderators
                        wrote on last edited by
                        #16

                        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.

                        (Z(:^

                        1 Reply Last reply
                        0
                        • A Offline
                          A Offline
                          andre
                          wrote on last edited by
                          #17

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

                          1 Reply Last reply
                          0
                          • McLionM Offline
                            McLionM Offline
                            McLion
                            wrote on last edited by
                            #18

                            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.

                            1 Reply Last reply
                            0
                            • A Offline
                              A Offline
                              andre
                              wrote on last edited by
                              #19

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

                              1 Reply Last reply
                              0
                              • McLionM Offline
                                McLionM Offline
                                McLion
                                wrote on last edited by
                                #20

                                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

                                1 Reply Last reply
                                0
                                • U Offline
                                  U Offline
                                  utcenter
                                  wrote on last edited by
                                  #21

                                  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.

                                  1 Reply Last reply
                                  0
                                  • McLionM Offline
                                    McLionM Offline
                                    McLion
                                    wrote on last edited by
                                    #22

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

                                    Thanks, Franz

                                    1 Reply Last reply
                                    0
                                    • U Offline
                                      U Offline
                                      utcenter
                                      wrote on last edited by
                                      #23

                                      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.

                                      1 Reply Last reply
                                      0

                                      • Login

                                      • Login or register to search.
                                      • First post
                                        Last post
                                      0
                                      • Categories
                                      • Recent
                                      • Tags
                                      • Popular
                                      • Users
                                      • Groups
                                      • Search
                                      • Get Qt Extensions
                                      • Unsolved