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. Drawing Frames arround Widgets
Forum Updated to NodeBB v4.3 + New Features

Drawing Frames arround Widgets

Scheduled Pinned Locked Moved Solved General and Desktop
25 Posts 4 Posters 4.4k Views 2 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.
  • M Offline
    M Offline
    mrjj
    Lifetime Qt Champion
    wrote on 4 Oct 2019, 08:58 last edited by
    #2

    Hi
    Since you cannot draw outside a
    Widget form its paintEvent
         its not that trivial to do.

    I used an overlay widget ( transparent for mouseclicks) to draw
    around widgets.
    https://stackoverflow.com/questions/19199863/draw-rectangular-overlay-on-qwidget-at-click

    Can I ask what the use case is?
    Maybe there is easier way to fulfill the same requirement.

    S 1 Reply Last reply 4 Oct 2019, 10:05
    3
    • S Offline
      S Offline
      sierdzio
      Moderators
      wrote on 4 Oct 2019, 09:06 last edited by
      #3

      You can probably use style sheets (QSS) or QStyle to change the colour of your widget's frames (QFrame). This should be quite easy to achieve - but as @mrjj points out, it won't paint outside of the widget.

      (Z(:^

      1 Reply Last reply
      1
      • M mrjj
        4 Oct 2019, 08:58

        Hi
        Since you cannot draw outside a
        Widget form its paintEvent
             its not that trivial to do.

        I used an overlay widget ( transparent for mouseclicks) to draw
        around widgets.
        https://stackoverflow.com/questions/19199863/draw-rectangular-overlay-on-qwidget-at-click

        Can I ask what the use case is?
        Maybe there is easier way to fulfill the same requirement.

        S Offline
        S Offline
        sandro4912
        wrote on 4 Oct 2019, 10:05 last edited by
        #4

        @mrjj

        Like i said i would like to draw the frame arround the widgets like the classic minesweeper has:

        Screenshot_20191004_120228.png

        I have the 2 LCD Displays the SmilieyButton and the minefield as Widgets. So i wonder how i can archieve to have the frame arround them.

        M 1 Reply Last reply 4 Oct 2019, 10:32
        0
        • S sandro4912
          4 Oct 2019, 10:05

          @mrjj

          Like i said i would like to draw the frame arround the widgets like the classic minesweeper has:

          Screenshot_20191004_120228.png

          I have the 2 LCD Displays the SmilieyButton and the minefield as Widgets. So i wonder how i can archieve to have the frame arround them.

          M Offline
          M Offline
          mrjj
          Lifetime Qt Champion
          wrote on 4 Oct 2019, 10:32 last edited by
          #5

          @sandro4912
          Hi
          Well the easy way would be to put them/each
          inside a QFrame and style that one to look like you want.

          1 Reply Last reply
          2
          • S Offline
            S Offline
            sandro4912
            wrote on 4 Oct 2019, 14:34 last edited by
            #6

            Ok this kinda works. I used 3 Frames like this:

            2f621cd1-162b-4593-88d4-ec9eeae071d4-image.png

            However to archieve the style like above i need to switch white and black lines from the borders of the inner ones. Is there a way to do that?

            M 1 Reply Last reply 4 Oct 2019, 14:44
            0
            • S sandro4912
              4 Oct 2019, 14:34

              Ok this kinda works. I used 3 Frames like this:

              2f621cd1-162b-4593-88d4-ec9eeae071d4-image.png

              However to archieve the style like above i need to switch white and black lines from the borders of the inner ones. Is there a way to do that?

              M Offline
              M Offline
              mrjj
              Lifetime Qt Champion
              wrote on 4 Oct 2019, 14:44 last edited by mrjj 10 Apr 2019, 14:45
              #7

              @sandro4912
              Hi
              If you mean the sunken style then yes
              alt text

              its just a setting from raised to sunken.

              alt text

              1 Reply Last reply
              2
              • S Offline
                S Offline
                sandro4912
                wrote on 4 Oct 2019, 15:13 last edited by
                #8

                With the frames my App looks like this:

                1966f261-46dd-44f3-9862-ea32fa07cfc5-image.png

                How can i get rid of the spacings from the frame to the widgets?

                I thought it was in the layout and setSpacing(0); whould remove it but it doesn't

                The code so far:

                private:
                    LcdDisplay *mLcdDisplayMinesLeft;
                    LcdDisplay *mLcdDisplayElapsedTime;
                    SmileyPushButton *mSmileyPushButton;
                    Minefield *mMinefield;
                
                    QFrame *mTopFrame;
                    QFrame *mBottomFrame;
                    QFrame *mMainFrame;
                
                Game::Game(QWidget *parent) :
                    QWidget(parent),
                    mLcdDisplayMinesLeft{ new LcdDisplay{ mDefaultMines} },
                    mLcdDisplayElapsedTime{ new LcdDisplay },
                    mSmileyPushButton{ new SmileyPushButton },
                    mMinefield{ new Minefield{
                                mDefaultFieldWidth,
                                mDefaultFieldHeight,
                                mDefaultMines }},
                    mTopFrame{ new QFrame },
                    mBottomFrame{ new QFrame },
                    mMainFrame{ new QFrame }
                {
                    mMainFrame->setFrameStyle(QFrame::Panel | QFrame::Raised);
                    mMainFrame->setLineWidth(3);
                
                    mTopFrame->setFrameStyle(QFrame::Panel | QFrame::Sunken);
                    mTopFrame->setLineWidth(3);
                
                    mBottomFrame->setFrameStyle(QFrame::Panel | QFrame::Sunken);
                    mBottomFrame->setLineWidth(3);
                
                    auto topLayout = new QHBoxLayout;
                    topLayout->setSpacing(0);
                    topLayout->addWidget(mLcdDisplayMinesLeft);
                    topLayout->addStretch();
                    topLayout->addWidget(mSmileyPushButton);
                    topLayout->addStretch();
                    topLayout->addWidget(mLcdDisplayElapsedTime);
                    mTopFrame->setLayout(topLayout);
                
                    auto bottomLayout = new QHBoxLayout;
                    bottomLayout->setSpacing(0);
                    bottomLayout->addWidget(mMinefield);
                    mBottomFrame->setLayout(bottomLayout);
                
                    auto mainLayout = new QVBoxLayout;
                    mainLayout->setSpacing(0);
                    mainLayout->addWidget(mTopFrame);
                    mainLayout->addWidget(mBottomFrame);
                
                    mMainFrame->setLayout(mainLayout);
                
                    auto layout = new QVBoxLayout;
                    layout->setSpacing(0);
                    layout->addWidget(mMainFrame);
                
                    setLayout(layout);
                }
                
                
                M 1 Reply Last reply 4 Oct 2019, 17:26
                0
                • S sandro4912
                  4 Oct 2019, 15:13

                  With the frames my App looks like this:

                  1966f261-46dd-44f3-9862-ea32fa07cfc5-image.png

                  How can i get rid of the spacings from the frame to the widgets?

                  I thought it was in the layout and setSpacing(0); whould remove it but it doesn't

                  The code so far:

                  private:
                      LcdDisplay *mLcdDisplayMinesLeft;
                      LcdDisplay *mLcdDisplayElapsedTime;
                      SmileyPushButton *mSmileyPushButton;
                      Minefield *mMinefield;
                  
                      QFrame *mTopFrame;
                      QFrame *mBottomFrame;
                      QFrame *mMainFrame;
                  
                  Game::Game(QWidget *parent) :
                      QWidget(parent),
                      mLcdDisplayMinesLeft{ new LcdDisplay{ mDefaultMines} },
                      mLcdDisplayElapsedTime{ new LcdDisplay },
                      mSmileyPushButton{ new SmileyPushButton },
                      mMinefield{ new Minefield{
                                  mDefaultFieldWidth,
                                  mDefaultFieldHeight,
                                  mDefaultMines }},
                      mTopFrame{ new QFrame },
                      mBottomFrame{ new QFrame },
                      mMainFrame{ new QFrame }
                  {
                      mMainFrame->setFrameStyle(QFrame::Panel | QFrame::Raised);
                      mMainFrame->setLineWidth(3);
                  
                      mTopFrame->setFrameStyle(QFrame::Panel | QFrame::Sunken);
                      mTopFrame->setLineWidth(3);
                  
                      mBottomFrame->setFrameStyle(QFrame::Panel | QFrame::Sunken);
                      mBottomFrame->setLineWidth(3);
                  
                      auto topLayout = new QHBoxLayout;
                      topLayout->setSpacing(0);
                      topLayout->addWidget(mLcdDisplayMinesLeft);
                      topLayout->addStretch();
                      topLayout->addWidget(mSmileyPushButton);
                      topLayout->addStretch();
                      topLayout->addWidget(mLcdDisplayElapsedTime);
                      mTopFrame->setLayout(topLayout);
                  
                      auto bottomLayout = new QHBoxLayout;
                      bottomLayout->setSpacing(0);
                      bottomLayout->addWidget(mMinefield);
                      mBottomFrame->setLayout(bottomLayout);
                  
                      auto mainLayout = new QVBoxLayout;
                      mainLayout->setSpacing(0);
                      mainLayout->addWidget(mTopFrame);
                      mainLayout->addWidget(mBottomFrame);
                  
                      mMainFrame->setLayout(mainLayout);
                  
                      auto layout = new QVBoxLayout;
                      layout->setSpacing(0);
                      layout->addWidget(mMainFrame);
                  
                      setLayout(layout);
                  }
                  
                  
                  M Offline
                  M Offline
                  mrjj
                  Lifetime Qt Champion
                  wrote on 4 Oct 2019, 17:26 last edited by
                  #9

                  @sandro4912
                  Hi
                  Looking good. :)

                  The space can most likely be removed with

                  layout->setContentsMargins(0,0,0,0);

                  all layout have a default values of 9 for all 4 sides

                  S 1 Reply Last reply 4 Oct 2019, 18:11
                  3
                  • M mrjj
                    4 Oct 2019, 17:26

                    @sandro4912
                    Hi
                    Looking good. :)

                    The space can most likely be removed with

                    layout->setContentsMargins(0,0,0,0);

                    all layout have a default values of 9 for all 4 sides

                    S Offline
                    S Offline
                    sandro4912
                    wrote on 4 Oct 2019, 18:11 last edited by
                    #10

                    @mrjj

                    Appling the margin i get this:

                    cd97f0df-bb0a-4ec9-ad36-808589b172e6-image.png

                    This is almost perfect. Just one nitpick.

                    The Top and Bottom frame seem to touch each other without any spae inbetween. Any change to add a space like between the outside frame and the inside frames?

                    The code now looks like this:

                        auto topLayout = new QHBoxLayout;
                        topLayout->setSpacing(0);
                        topLayout->setContentsMargins(0,0,0,0);
                        topLayout->addWidget(mLcdDisplayMinesLeft);
                        topLayout->addWidget(mSmileyPushButton);
                        topLayout->addWidget(mLcdDisplayElapsedTime);
                        mTopFrame->setLayout(topLayout);
                    
                        auto bottomLayout = new QHBoxLayout;
                        bottomLayout->setSpacing(0);
                        bottomLayout->setContentsMargins(0,0,0,0);
                        bottomLayout->addWidget(mMinefield);
                        mBottomFrame->setLayout(bottomLayout);
                    
                        auto mainLayout = new QVBoxLayout;
                        mainLayout->setSpacing(0);
                        mainLayout->addWidget(mTopFrame);
                        mainLayout->addWidget(mBottomFrame);
                    
                        mMainFrame->setLayout(mainLayout);
                    
                        auto layout = new QVBoxLayout;
                        layout->setSpacing(0);
                        layout->setContentsMargins(0,0,0,0);
                        layout->addWidget(mMainFrame);
                    
                        setLayout(layout);
                    
                    1 Reply Last reply
                    0
                    • S Offline
                      S Offline
                      sandro4912
                      wrote on 4 Oct 2019, 18:16 last edited by sandro4912 10 Apr 2019, 18:17
                      #11

                      I could solve the Issue by removing the Space 0 here:

                      auto mainLayout = new QVBoxLayout;
                          //mainLayout->setSpacing(0);
                          mainLayout->addWidget(mTopFrame);
                          mainLayout->addWidget(mBottomFrame);
                      

                      Which gives:

                      110f829d-24f0-4382-a414-ca3b200d02ff-image.png

                      That looks pretty close to the original:

                      b5a3a974-f0aa-4e07-867b-137dde40f3d0-image.png

                      Although it looks like there is still some kind of space between the minefield and the frame? Can it be removed aswell?

                      1 Reply Last reply
                      0
                      • M Offline
                        M Offline
                        mrjj
                        Lifetime Qt Champion
                        wrote on 4 Oct 2019, 18:17 last edited by
                        #12

                        Hi
                        It looks very much like the original
                        How nostalgic :)

                        1 Reply Last reply
                        0
                        • S Offline
                          S Offline
                          sandro4912
                          wrote on 4 Oct 2019, 18:19 last edited by
                          #13

                          Yes the only Issue I still see is the remainig space between minefield and the bottomFrame.

                          1 Reply Last reply
                          0
                          • M Offline
                            M Offline
                            mrjj
                            Lifetime Qt Champion
                            wrote on 4 Oct 2019, 18:40 last edited by
                            #14

                            Hi
                            There ?
                            alt text

                            1 Reply Last reply
                            1
                            • S Offline
                              S Offline
                              sandro4912
                              wrote on 4 Oct 2019, 18:50 last edited by
                              #15

                              Yes in the original theres no space at all.

                              I already throw out the top frame for testing to see if it causes it but still same result.

                              M 1 Reply Last reply 4 Oct 2019, 19:12
                              0
                              • S sandro4912
                                4 Oct 2019, 18:50

                                Yes in the original theres no space at all.

                                I already throw out the top frame for testing to see if it causes it but still same result.

                                M Offline
                                M Offline
                                mrjj
                                Lifetime Qt Champion
                                wrote on 4 Oct 2019, 19:12 last edited by
                                #16

                                @sandro4912
                                Hi
                                Im not sure where that space comes from as it seems you have it to zero

                                auto bottomLayout = new QHBoxLayout;
                                bottomLayout->setSpacing(0);
                                bottomLayout->setContentsMargins(0,0,0,0);
                                bottomLayout->addWidget(mMinefield);
                                mBottomFrame->setLayout(bottomLayout);

                                Did you try to raise the margins to see if you then get more space there ?

                                S 1 Reply Last reply 5 Oct 2019, 09:47
                                1
                                • S Offline
                                  S Offline
                                  sandro4912
                                  wrote on 5 Oct 2019, 05:46 last edited by
                                  #17
                                  This post is deleted!
                                  1 Reply Last reply
                                  0
                                  • M mrjj
                                    4 Oct 2019, 19:12

                                    @sandro4912
                                    Hi
                                    Im not sure where that space comes from as it seems you have it to zero

                                    auto bottomLayout = new QHBoxLayout;
                                    bottomLayout->setSpacing(0);
                                    bottomLayout->setContentsMargins(0,0,0,0);
                                    bottomLayout->addWidget(mMinefield);
                                    mBottomFrame->setLayout(bottomLayout);

                                    Did you try to raise the margins to see if you then get more space there ?

                                    S Offline
                                    S Offline
                                    sandro4912
                                    wrote on 5 Oct 2019, 09:47 last edited by
                                    #18

                                    @mrjj

                                    Yes if i rais the margin these spaces get higher. Still is very weired that 0 still gives these gaps.

                                    I run the game in KDE Neon and Windows 10. On both OS is the same behaviour.

                                    J 1 Reply Last reply 7 Oct 2019, 05:58
                                    0
                                    • S sandro4912
                                      5 Oct 2019, 09:47

                                      @mrjj

                                      Yes if i rais the margin these spaces get higher. Still is very weired that 0 still gives these gaps.

                                      I run the game in KDE Neon and Windows 10. On both OS is the same behaviour.

                                      J Offline
                                      J Offline
                                      J.Hilk
                                      Moderators
                                      wrote on 7 Oct 2019, 05:58 last edited by
                                      #19

                                      hi @sandro4912 ,

                                      my guess is, that the margins come from the mainLayout. You only set the setContentsMargins to 0 inside the bottomLayout, but the insert that layout into the mainLayout which has its own contentMargins still != 0


                                      Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


                                      Q: What's that?
                                      A: It's blue light.
                                      Q: What does it do?
                                      A: It turns blue.

                                      S 1 Reply Last reply 7 Oct 2019, 17:29
                                      2
                                      • J J.Hilk
                                        7 Oct 2019, 05:58

                                        hi @sandro4912 ,

                                        my guess is, that the margins come from the mainLayout. You only set the setContentsMargins to 0 inside the bottomLayout, but the insert that layout into the mainLayout which has its own contentMargins still != 0

                                        S Offline
                                        S Offline
                                        sandro4912
                                        wrote on 7 Oct 2019, 17:29 last edited by
                                        #20

                                        @J-Hilk

                                        No it still has the same Issue:

                                            auto topLayout = new QHBoxLayout;
                                            topLayout->setSpacing(0);
                                            topLayout->setContentsMargins(0,0,0,0);
                                            topLayout->addWidget(mLcdDisplayMinesLeft);
                                            topLayout->addWidget(mSmileyPushButton);
                                            topLayout->addWidget(mLcdDisplayElapsedTime);
                                            mTopFrame->setLayout(topLayout);
                                        
                                            auto bottomLayout = new QHBoxLayout;
                                            bottomLayout->setSpacing(0);
                                            bottomLayout->setContentsMargins(0,0,0,0);
                                            bottomLayout->addWidget(mMinefield);
                                            mBottomFrame->setLayout(bottomLayout);
                                        
                                            auto mainLayout = new QVBoxLayout;
                                            mainLayout->setSpacing(0);
                                            mainLayout->setContentsMargins(0,0,0,0);
                                            mainLayout->addWidget(mTopFrame);
                                            mainLayout->addWidget(mBottomFrame);
                                        
                                            mMainFrame->setLayout(mainLayout);
                                        
                                            auto layout = new QVBoxLayout;
                                            layout->setSpacing(0);
                                            layout->setContentsMargins(0,0,0,0);
                                            layout->addWidget(mMainFrame);
                                        
                                            setLayout(layout);
                                        

                                        Result:
                                        e9de883c-65c2-4d40-8e1b-c83887644194-image.png

                                        J 1 Reply Last reply 9 Oct 2019, 06:42
                                        0
                                        • S sandro4912
                                          7 Oct 2019, 17:29

                                          @J-Hilk

                                          No it still has the same Issue:

                                              auto topLayout = new QHBoxLayout;
                                              topLayout->setSpacing(0);
                                              topLayout->setContentsMargins(0,0,0,0);
                                              topLayout->addWidget(mLcdDisplayMinesLeft);
                                              topLayout->addWidget(mSmileyPushButton);
                                              topLayout->addWidget(mLcdDisplayElapsedTime);
                                              mTopFrame->setLayout(topLayout);
                                          
                                              auto bottomLayout = new QHBoxLayout;
                                              bottomLayout->setSpacing(0);
                                              bottomLayout->setContentsMargins(0,0,0,0);
                                              bottomLayout->addWidget(mMinefield);
                                              mBottomFrame->setLayout(bottomLayout);
                                          
                                              auto mainLayout = new QVBoxLayout;
                                              mainLayout->setSpacing(0);
                                              mainLayout->setContentsMargins(0,0,0,0);
                                              mainLayout->addWidget(mTopFrame);
                                              mainLayout->addWidget(mBottomFrame);
                                          
                                              mMainFrame->setLayout(mainLayout);
                                          
                                              auto layout = new QVBoxLayout;
                                              layout->setSpacing(0);
                                              layout->setContentsMargins(0,0,0,0);
                                              layout->addWidget(mMainFrame);
                                          
                                              setLayout(layout);
                                          

                                          Result:
                                          e9de883c-65c2-4d40-8e1b-c83887644194-image.png

                                          J Offline
                                          J Offline
                                          J.Hilk
                                          Moderators
                                          wrote on 9 Oct 2019, 06:42 last edited by
                                          #21

                                          @sandro4912
                                          mmh, strange.

                                          I'm out of easy ideas to try 😞
                                          sry


                                          Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


                                          Q: What's that?
                                          A: It's blue light.
                                          Q: What does it do?
                                          A: It turns blue.

                                          1 Reply Last reply
                                          0

                                          11/25

                                          4 Oct 2019, 18:16

                                          • Login

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