TGUI: a c++ GUI for SFML (with Form Builder)

[TheVirtualDragon]

OK, so I have just gone through the TGUI documentation and I don't know if there is anyway to do the following.

Basically, there is an image. I do not want all of the image to be displayed at the same time, but instead allow the user to scroll through the image using scroll bars. Is this possible in TGUI? If not, then is there anyway to do this, like using views?

EDIT: I think I need to use a sprite sheet and merge it with a scroll bar...

Double Edit: I think I have figured it out! TGUI is sooo easy to use...

[texus]

If you don't want an object to be displayed then just call the hide function.

U will need to use a view if you want to shift around the objects. You could put scrollbars to change the view of course.

I have been able to create a small test game where the character walks around in 2.5d perspective and I used a SpriteSheet objects for every tile. The view was following the character, so I know that it is perfectly possible to display a whole map with tgui. Some might argue that it is faster with sf::VertexArray, but but the 600 fps I was getting were more than enough imo.

EDIT: No, what you are trying to do isn't possible with tgui I think. You can't display a random part inside an image. You can only divide it into rows and columns with a SpriteSheet, but you can't just display the part that starts from e.g. left pixel 3 to right pixel 20.
If that is what you want then you indeed can't use my gui for that part.

[TheVirtualDragon]

What I have done is divided the SpriteSheet in to columns, then used a scrollbar to shift through the objects. Basically, here is my code (which I just put together very quickly):

#include <iostream>
#include <TGUI/TGUI.hpp>

using namespace std;

int main()
{
    tgui::Window window(sf::VideoMode(800, 600, 32), "Mapped Out");

    window.globalFont.loadFromFile("data/DejaVuSans.ttf");

    tgui::SpriteSheet *tileSheet = window.add<tgui::SpriteSheet>();
    tileSheet->load("data/TileSet.png");
    tileSheet->setPosition(0, 0);
    tileSheet->setCells(1, 2);

    tgui::Scrollbar* scroll = window.add<tgui::Scrollbar>();
    scroll->load("objects/Scrollbar/BabyBlue");
    scroll->setLowValue(1);
    scroll->setMaximum(2);
    scroll->verticalScroll = false;
    scroll->setPosition(0, 50);
    scroll->callbackID = 1;

    while (window.isOpen())
    {
        sf::Event event;
        while (window.pollEvent(event))
        {
            if (event.type == sf::Event::Closed)
                window.close();

            window.handleEvent(event);
        }

        tgui::Callback callback;
        while (window.getCallback(callback))
        {
            if(callback.callbackID == 1)
            {
                if(callback.trigger == tgui::Callback::valueChanged)
                {
                    int scrollValue = scroll->getValue();
                    tileSheet->setVisibleCell(1, scrollValue + 1);
                }

            }

        }

        window.clear(sf::Color(100, 175, 255));
        window.drawGUI();
        window.display();
    }
    return 0;
}
 

My current tile sheet only has 2 tiles in it, but later on - when it gets bigger - I can divide in to 3 or more and go through them (so it will be like a "slide" on a Powerpoint presentation).

I will also have a look at using views, I think that might give me a smoother animation of scrolling.

[texus]

I will also have a look at using views, I think that might give me a smoother animation of scrolling.

It won't. At least not with my SpriteSheet. If you want smooth animation then you will have to just draw the whole Picture, but with a view to limit the part that is drawn.
I could write a small example code if you like.

But in this case you might be better of with just using sf::Sprite and setting a texture rectangle instead of using Picture or SpriteSheet.

[TheVirtualDragon]

Yeah, that is exactly what I was thinking. I am implementing it just now...

[model76]

It is something that I have been thinking of rewriting again, so if you have ideas on how to improve it then please let me know.

I will try to keep this in mind as I poke around.

But why would you need to know when the mouse went down on a button? Why can't u just wait to do something until the user really clicked on the button?

That works OK where the button is concerned. What I am concerned about is my own code, separate from TGUI. How should I distinguish if a mouse down event happened on the button or not?
In the first case, I don't want my code to to respond to it, and in the latter I do.

[texus]

I have added a mouseDown event to the button, so you will also get a callback when the mouse goes down.
If this isn't what you need then you will have to be a little bit more specific about what you are trying to do.

[model76]

That would work for the button, but not for other widgets. It also works only for button down events, and possibly only with the left mouse button.

What I am looking for is a more general way of determining whether some mouse event happened on a widget or not.

One solution could be an isMouseOverWidget method on all widgets. Such a method should of course also check all sub-widgets contained by a widget, such as a scroll bar.

The same applies to keyboard events, but those are really only handled by EditBox I believe, and in this case you can simply check if an EditBox has focus.

I hope that clarifies my question.

[texus]

I can even give you 3 solutions.

1)

if (event.type == sf::Event::MouseButtonPressed)
{
    if (button->mouseOnObject(event.mouseButton.x, event.mouseButton.y) == false)
    {
        // The click did not occur on the button
    }
}

Like this you can find out when you clicked on the button or not.
The only problem is that you will have to manually check every object.

2)
You want to find out if the mouse went down next to my widgets, so on something else.
You could make that 'something else' a custom tgui widget so that it can make use of the EventManager in tgui?

3)
Another solution to your problem could be to put a Picture behind all tgui objects (the Empty.png image from my Form Builder).
Then you ask me to implement a mouseDown event for Picture as well.
And when the Picture gives you a mouseDown callback you will know that the mouse didn't went down on any other tgui object.

TextBox also has keyboard events.

[model76]

Option 1 definitely seems like the preferred method with TGUI. Thanks!

[TheVirtualDragon]

So...Are you planning on releasing any themes? I am working on a OSX theme right now...

[texus]

You can already use the Black style and for most objects also BabyBlue.
I am not planning to make any more styles/themes, but if you create one then feel free to share it with the rest.

Currently you will have to point every object to its own images.
Loading a complete theme at once is planned, but not something that you should expect soon.

[model76]

tgui::Form::handleEvent currently has a reference to an sf::Event as its parameter. This usually means that the user should expect the passed in variable to be altered in some way.

I suspect this isn't the case, and suggest that you change it to a const reference.

[texus]

You already suggested to make all unchanged parameters constant, which is something I will do in the near future.
This parameter will also be changed then.

I am currently working on getting setScale to work correctly with all objects, which has a higher priority to me than placing a few constants in the code.

[model76]

Did I? I thought I had only mentioned making methods that don't change members constant. Sorry about that.