Questions

Hello,

So TGUI seems to be running perfectly on my computer now, which is already great. I was compiling the examples shown on the website, and one question arises... Where can I download Black.conf ?

Also, I was wondering if that was possible to make a chatbox or listbox with buttons in every line? Though this is not what I want to do, an example would be to make two buttons per line, one whose goal is to move the line one rank higher, and the other one one rank lower.

Thanks!

Where can I download Black.conf ?

It is provided inside the TGUI download, inside the "widgets" folder.

Also, I was wondering if that was possible to make a chatbox or listbox with buttons in every line?

You should have a look at the Grid widget:
https://tgui.eu/tutorials/v06/grid/
https://tgui.eu/documentation/v0.6/classtgui_1_1Grid.html

Thanks for Black.conf.

As for grid, I tried the examples but I couldn't make it work. You did not seem to bother declaring a grid in your tutorials (or maybe I didn't search too well?), and the line

tgui::EditBox::Ptr edittBox(*grid);
gets an error on my computer.

All widgets are created in the same way.

In order to create the grid, just do:
tgui::Grid::Ptr grid(gui);
That will add the grid widget to the gui and after that you can start adding stuff to the grid.

It may have been a bit unclear in the tutorial, since I don't specify what the grid variable is.

(if this is not your problem, the you should post the error message so that I don't have to guess)

Everything compiles perfectly now, thanks

Ok, I have also added the line to the tutorial.

It feels a bit weird for me to write the line though, since I have been working on v0.7 for some time already and creating a widget is completely different there. I even had to look up myself whether grid had a load function or not .

Hello, is there a simple way to create a square button (I can't do it with Black.conf, it is only rectangular, and I'm not sure I understand the lines inside Black.conf) with a different image?

My goal is to create a listbox where each line contains
- a text
- next to the text, a dozen buttons with no text on them, instead they each have their own image so that the user can easily guess what each button actually does.

Is this doable? Sorry to be such a pain

It sure is possible, but not with the default Black theme. One of the limitations of v0.6 is that you can't use a size for which the image was intended for (e.g. the black button isn't intended to be square).

But do you really need a button? The theme files are still limited to one button per file, so you would be needing a theme file for every button image. This limitation even still exists on my private v0.7-dev branch, although I plan to fix that next week or so.

So it would be easier if a simple image was enough (if not then I'll happily explain how to write the theme files). If you don't need a different hover or down image, then you can just use the Picture class. It is also capable of sending click callbacks.

My goal is to create a listbox where each line contains
- a text
- next to the text, a dozen buttons with no text on them, instead they each have their own image so that the user can easily guess what each button actually does.

Out of my head (i.e. untested code), it would look like this: (it assumes that each column has the same button images)
void addLine(tgui::Grid::Ptr grid, const std::string& text)
{
    // There is no function that returns the amount of columns or rows it seems
    // I guess I'll have to fix that, but for now rows = amountOfWidgets / widgetsPerRow
    unsigned int rows = grid->getWidgets().size() / 3;  // 3 because we add a label and two pictures
   
    tgui::Label::Ptr label(*grid);
    // change stuff like label color and text size
    label->setText(text);
   
    tgui::Picture::Ptr first(*grid);
    first->load("FirstButton.png");
   
    tgui::Picture::Ptr second(*grid);
    second->load("SecondButton.png");
   
    grid->addWidget(label, rows, 0);
    first->addWidget(label, rows, 1);
    second->addWidget(label, rows, 2);
}

int main()
{
    // Obviously some other code is in this function as well
   
    tgui::Grid::Ptr grid(gui);
   
    // Whenever you need a new line you just call addLine(grid, "Text")
}
How you handle the callback is up to you, but just for the sake of giving an example, here the callback function will be called with the row and column number of the grid (since label is in column 0, the first button has column number 1, the next 2, and so on)
void func(unsigned int row, unsigned int col);
first->bindCallback(std::bind(func, rows, 1), tgui::Picture::LeftMouseClicked);
second->bindCallback(std::bind(func, rows, 2), tgui::Picture::LeftMouseClicked);

Sorry to be such a pain

Its ok to ask questions, especially about complex stuff like this. Plus it prevents me from feeling like nobody is using my library .

Hello texus,

Well I sort of plan to make a (free) software whose goal is to play cards. Usually, when you play a card game on the Internet, you hover over the card and a list of options appears nearby (flip, move, etc.). I want to offer a lot of options, but as a result the list would be much longer than the card! So I fancy buttons with pictures on the card instead of a list nearby, each button having an explicit picture for what they do.

In game, I could sometimes need up to 20 different buttons that would display on one single card. Ideally , they would appear progressively on the card when you hover over it (From 100% transparent to 0% transparent, though I want this to be fast, so something like 100% -> 0% in 4-5 frames). Ideally still, these buttons would move along with the card when it is moving slowly or moving close to the initial location.

Now, I am bothering you with lists with buttons at every line because the game would need different card piles. I plan to pop up a window when you click on a card pile, and in that window, the names of all the cards located in that pile appear in a list, along with the option buttons. Ideally, under the list would also be a text box, and for whatever string you type in it, the list of cards is shortened to the cards that each have that string in their name.

Unfortunately, depending on the card, some buttons might not be displayed (be it in game or in the list). (For example, there is no need to offer the option "move to pile 5" if the card already is in pile 5.) Also, depending on the card, some buttons may share the same location, but are never displayed at the same time (like, the third button is ButtonA for all cards of type A, but is ButtonB for all cards of type B)

On top of that, I would very much like all buttons to have their own hover and down image, yes. 

Sooooo, as you can see, there is a lot of work for me!  So thanks a lot for your input, I'm going to use what you wrote now and see if I can code something remotely close to my goal with that. I know this will take me weeks (months?) anyway. I will try to handle all the different buttons by using the same code you wrote in Black.conf.

Thanks for reading

If you do need hover and down images then you will have to use buttons instead of normal pictures.

Unlike the Black theme, your images probably will never get stretched in one direction and you thus don't need to split them in 3 parts.
So you can use NormalImage, HoverImage and DownImage properties (instead of all combinations with _L, _M and _R).
The value is the filename of the image in quotes, optionally followed by which part of the image to load (defined as (left, top, width, height)). It the part rectangle is not specified, the entire file will be loaded.

As said, you will need one theme file per button. So they will look like:
Button:
NormalImage = "..."
HoverImage = "..."
DownImage = "..."
SeparateHoverImage = true

Some of the work you have to do could be easier in v0.7.
Two examples:
- You can have multiple buttons in a single config file (I very recently added this feature)
- You can specify a relative position. You can make the buttons relative to the card (if this is a tgui::Picture widget and not a sf::Sprite) and then the buttons will automatically move when the position of the card changes.

However, since v0.7 is still under serious changes (the big rewrite is almost finished though), the new parts are not very well tested and the api will not remain stable. But if you want to try this version (most features can be found by looking at the post on the blog), then just let me know.

The project indeed sounds like a lot of work. I would love to see it when it finished.

Well unless it will take you several months to finish your latest version, I think I can wait a bit. I have other things to code anyway (like... the database) I'd rather wait and use a stable version than take the current one as it is and experience problems.

As for the cards, they are all sf::Sprite.

Thanks a lot for your help.

As for the cards, they are all sf::Sprite.

In that case the automatic relative positioning won't help much.

Well unless it will take you several months to finish your latest version, I think I can wait a bit.

I can't predict how long it will take, but I don't expect it to be finished this year. I'll have a little over one month left to work on it every day and then I will have a lot less time. So its hard to predict how far I can get by next month. Hopefully there will be an alpha version by then which will bring some stability.

I'd rather wait and use a stable version than take the current one as it is and experience problems.

I guess you can still make a decision in a month or so, to see what the status is at that point. There will be tons of new features in v0.7, but I don't think I will get the same stability as in v0.6 soon.
If v0.6 already has what you need then that should probably be the version to go with.

Alright I see.

Quick question, I couldn't find that piece of information. When you display an EditBox, it is easy to put an automatic text in it (like "Enter your username"). But I would like this text to disappear as soon as I click inside the EditBox. Also, I would like this text to be in italic grey, so that one could easily notice that it's only an automatic text. Is there any easy way to do this?

I have added something similar in v0.7, with the difference that it isn't italic and only disappears when you start typing. Making it italic is not such a bad idea, I guess I'm going to change my code to do that too.

Without changing the code in edit box, you could write some functions that make changes to the edit box at the right time, but you can't make the text italic.
With the code that I'm going to have for v0.7 (and which can possibly be ported back to v0.6 if you want), it won't disappear when just clicking on the edit box. Although you could intercept the focus callback to remove the default text, and the unfocused callback to add it again.

I think it might be best using the code you prepared for v0.7 then, because this way I won't have to change anything when upgrading. Tell me what to add where please.