Get Grid working

Started by Dnake, 29 May 2015, 13:06:35

Dnake

Hello,
The solution should be obvious, but I cannot get a Grid working properly:

#include <TGUI/Gui.hpp>
#include <TGUI/Label.hpp>
#include <TGUI/Grid.hpp>
#include <TGUI/Panel.hpp>

int main()
{
using tgui::bindWidth;
using tgui::bindHeight;
sf::RenderWindow window(sf::VideoMode(400, 300), "TGUI window");
tgui::Gui gui(window);
gui.setGlobalFont("DejaVuSans.ttf");

auto grid = tgui::Grid::create();
grid->setSize(bindWidth(gui), bindHeight(gui));
gui.add(grid);

std::vector<std::vector<sf::String>> itemListList = {{"Hello", "The", "World"}, {"TGUI", "is", "great!"}, {"Roses", "are", "red"}};
for(unsigned i{0}; i < itemListList.size(); ++i)
{
for(unsigned j{0}; j < itemListList[i].size(); ++j)
{
tgui::Label::Ptr label = tgui::Label::create();
label->setTextSize(10);
label->setText(itemListList[i][j]);
label->setTextColor(sf::Color::Black);
grid->addWidget(label, i, j);
}
}
    while (window.isOpen())
    {
        sf::Event event;
        while (window.pollEvent(event))
        {
            if (event.type == sf::Event::Closed)
                window.close();
            gui.handleEvent(event);
        }
        window.clear(sf::Color::White);
        gui.draw();
        window.display();
    }
    return 0;
}


I simply get a white screen, without text at all.

I'm using last TGUI and SFML versions.

texus

It is very unintuitive, but due to the way Grid is currently written you have to call both the add and the addWidget functions.

Code (cpp) Select
grid->add(label); // add the label to the grid like you add it to any other parent
grid->addWidget(label, i, j); // put the label in the correct cell in the grid

Dnake

Ok, I can now show the labels, but how can I make the grid fit the whole size of the window ?
I wrote grid->setSize(bindWidth(gui), bindHeight(gui)); but it seems to doesn't have any effect, the grid has the size of the labels in it, in place of fitting the whole window and centering labels in the cells. Maybe the grid is not intented to do that ?..

In fact, I would like to do an interface like this : https://i1.ytimg.com/vi/WA1sLQ55FII/maxresdefault.jpg
with the ability to select which columns are shown. So a grid would be nice for the big list, but I cannot make it fitting the whole width.

texus

#3
A widget to create an interface like that has been requested several times. I still haven't figured out a decent way to implement it because there are so many variations in the requests (lines between the columns, name of the column on top, scrollbar, ability to highlight a line, images next to text, ...). So for now it isn't that easy to create something like that. But it definately is on the todo list for tgui 0.7, although it will be looked into after the release of 0.7.0.

The ability for Grid to automatically position its widgets when you call setSize was a feature that someone contributed to tgui. I never really took the time to fully understand that part of the code. Apparently I broke the feature when implementing the Layout system. I fixed it now, so it should work again if you download the latest version again.

Dnake

Ok, this feature is the only one I need, all others feature you mentionned (scrollbar, lines, ...) can be done with others widgets relatively  easily.

In another unrelated topic (I found it more natural to continue discussion here instead of open another topic), would it be possible to customize a bit more widgets like Tab, Tooltip and ChildWindow ? Actually, these widgets use Labels for rendering (the ChildWindow use it for the close button). It would be nice to use custom widget instead of the default Label, or at least a picture, allowing to put nice images for tabs and close button on window, or complete tooltip full of informations.

texus

#5
Customization is limited, but Tab and ChildWindow can use images.
ChildWindow uses a Button widget for the close button. Check the Black.conf file in the widgets folder for an example on how to customize it.
Tab can have a background image, but it has to be the same for every tab, so you can't give each tab a different look.
Tooltip doesn't just use a label, it is a label. So anything you can customize on a label can be done on a tooltip too.

But if you have more specific suggestions on what should be customizable and you can give some use case for it then I will add them on my todo list. They won't get added anywhere soon, but they will be looked at next time I'm making improvements to the widget.

Dnake

Thanks for the tip on ChildWindow, I didn't dig deep enough to view that.

I think a different image for each tab is very common and more natural in a video game, you can see an exemple in the screenshot I posted above, but I seen this kind of tab in many other games. So I think a good thing would be to choose an image to add at left or right of the text in the tab, just like a Checkbox. But the image should  be stored in Tab rather than in TabRenderer, because it is specific data for each tab rather than a style data, so just like an extension of the text.

And for the Tooltip I think to the tooltip in the Qt librairy, wich allow to put full rich text/HTML in tooltip.
I think a good interface would be to have a Tooltip class that hold a Label by default, so with a owning semantic instead of inheriting, and allow the user to change the displayed widget. That will allow to create rich tooltip with many information (just like in many games when hovering an item in an inventory), or display a single line with different polices (this kind of tooltip is used inside QtCreator, but I'm not able to make a print screen of it, it disappear at the key pressure... ).

texus

#7
For the Tab I might as well write a different widget for it. A lot of code in the tab widget is about the distance between the sides and the text and about auto scaling to fit the text. All of these things aren't necessary if every tab is an image. Trying to put both ways into the same widget will probably lead to even more redundant code. But it is definately a good idea to have a tab with images.
Edit: I was thinking about a Tab that didn't have any text on it like in the screenshot. To support both an image and text, it would have to be integrated in the same widget.

For Tooltip there are a few ways that it could get added. One way is to make it a panel, that would allow you to do anything on it, but it might become too complex. The other way is that the Label class evolves into a more complex class which allows rich text (possibly split in a e.g. a normal Label and a RichLabel class). Then tooltip would just inherit the rich text label. Or maybe something in between, something like you suggested, I'll think about this later.

So both ideas are added on my todo list, but only the first one is likely to be added in 0.7.