Looking for a tile layout kind of widget.

If you are using the main C++ distribution of wxWidgets, Feel free to ask any question related to wxWidgets development here. This means questions regarding to C++ and wxWidgets, not compile problems.
apoorv569
Super wx Problem Solver
Super wx Problem Solver
Posts: 426
Joined: Tue Oct 20, 2020 3:35 pm

Looking for a tile layout kind of widget.

Post by apoorv569 »

I'm looking for a widget that can show something like this,

Image

This is a screenshot I found on just a random website. But I want something that can show those rectangular kind of tiles, that can be clicked on, like big folders in a file manager for example, that can also display images and some text below the tile, like folder name. It doesn't have to be exact but close.
User avatar
doublemax
Moderator
Moderator
Posts: 19116
Joined: Fri Apr 21, 2006 8:03 pm
Location: $FCE2

Re: Looking for a tile layout kind of widget.

Post by doublemax »

There is nothing in wxWidgets that does this, and i also don't know any external component for it.

I'd use a wxHtmlWindow for that. Even with its limitations, it's sufficient for this function and lightweight compared to a wxWebView control.
Use the source, Luke!
apoorv569
Super wx Problem Solver
Super wx Problem Solver
Posts: 426
Joined: Tue Oct 20, 2020 3:35 pm

Re: Looking for a tile layout kind of widget.

Post by apoorv569 »

doublemax wrote: Sun Sep 19, 2021 3:48 pm There is nothing in wxWidgets that does this, and i also don't know any external component for it.

I'd use a wxHtmlWindow for that. Even with its limitations, it's sufficient for this function and lightweight compared to a wxWebView control.
Interesting, thanks for suggestion. Looks like for using wxHtmlWindow I also have to write some HTML. My HTML skills are very basic but I can do that.

Is it also possible to use normal widgets like wxButton or wxTextCtrl for example, inside a wxHtmlWindow?
User avatar
doublemax
Moderator
Moderator
Posts: 19116
Joined: Fri Apr 21, 2006 8:03 pm
Location: $FCE2

Re: Looking for a tile layout kind of widget.

Post by doublemax »

apoorv569 wrote: Sun Sep 19, 2021 4:33 pm Is it also possible to use normal widgets like wxButton or wxTextCtrl for example, inside a wxHtmlWindow?
Theoretically yes, but i requires jumping through some hoops and i would advise against it anyway. If you want to use standard controls, you could just build the layout using sizers, wxStaticBitmaps, and wxStaticTexts etc. But it you have many items to display, you could run into the Windows handle limit.

But you can react to clicks in a wxHtmlWindow by using HTML links.
Use the source, Luke!
Kvaz1r
Super wx Problem Solver
Super wx Problem Solver
Posts: 357
Joined: Tue Jun 07, 2016 1:07 pm

Re: Looking for a tile layout kind of widget.

Post by Kvaz1r »

If all that you need are images and text and we are talking about reasonable amount of them - I'd start with just wxFlexGridSizer with wxBitmapButtons and wxStaticTexts inside. And by user click provide some pop-up modal dialog with additional info. But without knowing use-case it's hard to tell something specific.
apoorv569
Super wx Problem Solver
Super wx Problem Solver
Posts: 426
Joined: Tue Oct 20, 2020 3:35 pm

Re: Looking for a tile layout kind of widget.

Post by apoorv569 »

doublemax wrote: Sun Sep 19, 2021 4:36 pm Theoretically yes, but i requires jumping through some hoops and i would advise against it anyway. If you want to use standard controls, you could just build the layout using sizers, wxStaticBitmaps, and wxStaticTexts etc. But it you have many items to display, you could run into the Windows handle limit.

But you can react to clicks in a wxHtmlWindow by using HTML links.
I see, I'm basically trying to make a GUI frontend for the package manager of the Linux distribution that I'm using an app store basically. So there would be a lot of images and control needed to show in a single page, as there are a lot of software in the repositories, and I want to show them as tiles, so if user clicks on a software tile, it then opens its info sort of page, that can have information about that software, screenshots reviews and all. I initially started wxListCtrl with wxLC_ICON as the style, but the icons are very small, I want larger size, that's why I was looking for something like how steam has those tiles, as it was what I had in mind for how a app store would look like.
apoorv569
Super wx Problem Solver
Super wx Problem Solver
Posts: 426
Joined: Tue Oct 20, 2020 3:35 pm

Re: Looking for a tile layout kind of widget.

Post by apoorv569 »

Kvaz1r wrote: Sun Sep 19, 2021 4:43 pm If all that you need are images and text and we are talking about reasonable amount of them - I'd start with just wxFlexGridSizer with wxBitmapButtons and wxStaticTexts inside. And by user click provide some pop-up modal dialog with additional info. But without knowing use-case it's hard to tell something specific.
wxBitmapButton seems like a good option, but in the previous post doublemax said, it is possible run in to window handle limit, and I will be needing a lot of buttons. I am basically trying to make a app store for the operating system that I'm using.
Kvaz1r
Super wx Problem Solver
Super wx Problem Solver
Posts: 357
Joined: Tue Jun 07, 2016 1:07 pm

Re: Looking for a tile layout kind of widget.

Post by Kvaz1r »

apoorv569 wrote: Sun Sep 19, 2021 5:37 pm wxBitmapButton seems like a good option, but in the previous post doublemax said, it is possible run in to window handle limit, and I will be needing a lot of buttons. I am basically trying to make a app store for the operating system that I'm using.
You can update bitmaps when user scroll your window up or down, I don't think you want show at once more than 40 bitmaps. This is exactly what do wxListCtrl under virtual mode.
apoorv569
Super wx Problem Solver
Super wx Problem Solver
Posts: 426
Joined: Tue Oct 20, 2020 3:35 pm

Re: Looking for a tile layout kind of widget.

Post by apoorv569 »

Kvaz1r wrote: You can update bitmaps when user scroll your window up or down, I don't think you want show at once more than 40 bitmaps. This is exactly what do wxListCtrl under virtual mode.
I see, this looks interesting, I have never defined the window to be scroll-able manually. But I did find this widget called wxVScrolledWindow, so I replaced the top wxPanel with wxVScrolledWindow, everything is working, but I don't understand how do I tell it to show only certain number of buttons at a time, and allow the rest to be shown as the user scrolls down.

I had this going on so far, just used a single icon for Firefox as a example,
Image

Here is of code for what I have in the above screenshot,

Code: Select all

cMainFrame::cMainFrame()
    :wxFrame(NULL, wxID_ANY, "PacStore", wxDefaultPosition, wxSize(800, 600))
{
    SetMinSize(wxSize(800, 600));

    m_MainSizer = new wxBoxSizer(wxVERTICAL);
    m_ScrolledSizer = new wxBoxSizer(wxVERTICAL);
    m_TilesSizer = new wxGridSizer(m_nFieldWidth, m_nFieldHeight, 20, 20);

    // m_Panel = new wxPanel(this, wxID_ANY);

    m_ScrolledWindow = new wxVScrolledWindow(this, wxID_ANY, wxDefaultPosition, wxDefaultSize);
    m_ScrolledWindow->SetVirtualSize(800, 600);
    
    m_Tiles = new wxBitmapButton*[m_nFieldWidth * m_nFieldHeight];

    for (int x = 0; x < m_nFieldWidth; x++)
    {
        for (int y = 0; y < m_nFieldHeight; y++)
        {
            m_Tiles[y * m_nFieldWidth + x] = new wxBitmapButton(m_ScrolledWindow, GET_BUTTON + (y * m_nFieldWidth + x),
                                                                wxBitmap("/home/apoorv/Downloads/firefox_icon_n.gif", wxBITMAP_TYPE_GIF),
                                                                wxDefaultPosition, wxSize(20, 40));

            m_TilesSizer->Add(m_Tiles[y * m_nFieldWidth + x], 1, wxALL | wxEXPAND);

            m_Tiles[y * m_nFieldWidth + x]->Bind(wxEVT_BUTTON, &cMainFrame::OnClickButton, this);
        }
    }

    m_MainSizer->Add(m_ScrolledWindow, 1, wxALL | wxEXPAND, 2);

    m_ScrolledSizer->Add(m_TilesSizer, 1, wxALL | wxEXPAND, 2);

    this->SetSizer(m_MainSizer);
    this->Layout();
    this->Center(wxBOTH);

    m_ScrolledWindow->SetSizer(m_ScrolledSizer);
    m_ScrolledSizer->Fit(m_ScrolledWindow);
    m_ScrolledSizer->SetSizeHints(m_ScrolledWindow);
    m_ScrolledSizer->Layout();
}
The button array code is from javidx9 video about wxWidgets on YouTube.
Kvaz1r
Super wx Problem Solver
Super wx Problem Solver
Posts: 357
Joined: Tue Jun 07, 2016 1:07 pm

Re: Looking for a tile layout kind of widget.

Post by Kvaz1r »

Ok, it seems that I was wrong - there isn't a way to move sizers inside wxVScrolledWindow.
What if draw only bitmaps? What should happen when user click on bitmap?
apoorv569
Super wx Problem Solver
Super wx Problem Solver
Posts: 426
Joined: Tue Oct 20, 2020 3:35 pm

Re: Looking for a tile layout kind of widget.

Post by apoorv569 »

Kvaz1r wrote: Tue Sep 21, 2021 7:02 pm Ok, it seems that I was wrong - there isn't a way to move sizers inside wxVScrolledWindow.
What if draw only bitmaps? What should happen when user click on bitmap?
Okay, I got it somewhat working with wxScrolledWindow, I found this viewtopic.php?t=44256 post, about a similar problem as mine. I basically added the wxPanel back and set the ScrollRate of wxScrolledWindow to 5 - 5, also added the wxVSCROLL flag to the constructor of wxScrolledWindow, here is the code,

Code: Select all

cMainFrame::cMainFrame()
    :wxFrame(NULL, wxID_ANY, "PacStore", wxDefaultPosition, wxSize(800, 600))
{
    SetMinSize(wxSize(800, 600));

    m_MainSizer = new wxBoxSizer(wxVERTICAL);
    m_TopSizer = new wxBoxSizer(wxVERTICAL);
    m_ScrolledSizer = new wxBoxSizer(wxVERTICAL);
    m_TilesSizer = new wxGridSizer(m_nFieldWidth, m_nFieldHeight, 20, 20);

    m_Panel = new wxPanel(this, wxID_ANY);

    m_ScrolledWindow = new wxScrolledWindow(m_Panel, wxID_ANY, wxDefaultPosition, wxDefaultSize, wxVSCROLL | wxBORDER_THEME);
    m_ScrolledWindow->SetScrollRate(5, 5);

    m_Tiles = new wxBitmapButton*[m_nFieldWidth * m_nFieldHeight];

    for (int x = 0; x < m_nFieldWidth; x++)
    {
        for (int y = 0; y < m_nFieldHeight; y++)
        {
            m_Tiles[y * m_nFieldWidth + x] = new wxBitmapButton(m_ScrolledWindow, GET_BUTTON + (y * m_nFieldWidth + x),
                                                                wxBitmap("/home/apoorv/Downloads/firefox_icon_n.gif", wxBITMAP_TYPE_GIF),
                                                                wxDefaultPosition, wxSize(20, 40));

            m_TilesSizer->Add(m_Tiles[y * m_nFieldWidth + x], 1, wxALL | wxEXPAND);

            m_Tiles[y * m_nFieldWidth + x]->Bind(wxEVT_BUTTON, &cMainFrame::OnClickGetPackageName, this);
        }
    }

    m_TopSizer->Add(m_ScrolledWindow, 1, wxALL | wxEXPAND, 2);

    m_ScrolledSizer->Add(m_TilesSizer, 1, wxALL | wxEXPAND, 2);

    m_MainSizer->Add(m_Panel, 1, wxALL | wxEXPAND, 2);

    this->SetSizer(m_MainSizer);
    this->Layout();
    this->Center(wxBOTH);

    m_ScrolledWindow->SetSizer(m_ScrolledSizer);
    m_ScrolledSizer->Fit(m_ScrolledWindow);
    m_ScrolledSizer->SetSizeHints(m_ScrolledWindow);
    m_ScrolledSizer->Layout();

    m_Panel->SetSizer(m_TopSizer);
    m_TopSizer->Fit(m_Panel);
    m_TopSizer->SetSizeHints(m_Panel);
    m_TopSizer->Layout();
}
I increased the FieldWidth and FieldHeight to 20 and 5 respectively. Now I do have a vertical scrollbar. The problem I have now is, how do I limit the amount of buttons shown at once, and also the size of button. Because as of now, you can see the more buttons I add more they shrink and try to fit inside the sizer.

Here is how it looks currently,
Image
Kvaz1r
Super wx Problem Solver
Super wx Problem Solver
Posts: 357
Joined: Tue Jun 07, 2016 1:07 pm

Re: Looking for a tile layout kind of widget.

Post by Kvaz1r »

apoorv569 wrote: Wed Sep 22, 2021 5:55 am I increased the FieldWidth and FieldHeight to 20 and 5 respectively. Now I do have a vertical scrollbar. The problem I have now is, how do I limit the amount of buttons shown at once, and also the size of button. Because as of now, you can see the more buttons I add more they shrink and try to fit inside the sizer.
With that approach you still create all those buttons at once. So back to my questions:
Kvaz1r wrote: Tue Sep 21, 2021 7:02 pm What if draw only bitmaps? What should happen when user click on bitmap?
User avatar
doublemax
Moderator
Moderator
Posts: 19116
Joined: Fri Apr 21, 2006 8:03 pm
Location: $FCE2

Re: Looking for a tile layout kind of widget.

Post by doublemax »

The problem I have now is, how do I limit the amount of buttons shown at once, and also the size of button. Because as of now, you can see the more buttons I add more they shrink and try to fit inside the sizer.
Check out wxWrapSizer: https://docs.wxwidgets.org/trunk/classw ... sizer.html
Use the source, Luke!
apoorv569
Super wx Problem Solver
Super wx Problem Solver
Posts: 426
Joined: Tue Oct 20, 2020 3:35 pm

Re: Looking for a tile layout kind of widget.

Post by apoorv569 »

Kvaz1r wrote: With that approach you still create all those buttons at once. So back to my questions:
Yes, I am aware all the buttons will be created at once.
Kvaz1r wrote: What if draw only bitmaps? What should happen when user click on bitmap?
I can use only bitmaps, but buttons have that hover and click effect that bitmap doesn't. Now that can be added as a logic, OnHover or OnClick for example. But I think there must be some logic that can be applied to bitmap buttons as well, so only buttons that are visible get created.

When the user clicks on the button or bitmap, it should basically open a different view or page that has the application's information, such as publisher, size, repository its being downloaded from, reviews, screenshots and all. Just like how all the app stores work.
apoorv569
Super wx Problem Solver
Super wx Problem Solver
Posts: 426
Joined: Tue Oct 20, 2020 3:35 pm

Re: Looking for a tile layout kind of widget.

Post by apoorv569 »

doublemax wrote: Check out wxWrapSizer: https://docs.wxwidgets.org/trunk/classw ... sizer.html
Oh! This is nice, this does fix the problem somewhat. I noticed that when I expand the window size, more stuff appears, but once I get expand it to the point that the scrollbar disappears, and then I make the window small again, I don't get the scroll bar back, they all still stay in the same layout. Is this behavior expected? I thought it would go back to showing less when the window is made smaller again.
Post Reply