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

[texus]

TGUI is an easy to use cross-platform GUI based on SFML and written in C++.

Currently (v0.4) the following objects can be used:
- Label
- Picture
- SpriteSheet
- Button
- Checkbox
- RadioButton
- EditBox
- Slider
- Scrollbar
- Listbox
- ComboBox
- LoadingBar
- TextBox
- Panel

Screenshots:
TGUI v0.3.4 (Black style)


TGUI v0.4.0 (Black style)


TGUI v0.4.0 (BabyBlue style)


Video of the TGUI Form Builder v0.2 that shows how easily you can make a login screen.




Features:
 * It is extremely easy to use: only a few lines of code and you have e.g. a fully working edit box.
 * You can handle object callbacks just like you handle events in SFML.
 * You can create unlimited objects, even while the program is running e.g. create object on click.
 * Objects can be loaded from a file, you can update e.g. the positions without compilation.
 * TGUI uses an internal texture manager so that no image is loaded twice.
 * All objects are derived from sf::Transformable, so you can use e.g. setPosition.
 * TGUI used the camelCase notation which is the same as SFML uses.
 * Just like SFML, it is licensed under the zlib/libpng license.
 * Cross-platform: Windows, Linux and Mac OS X.
 * TGUI provides an easy to use drag-and-drop form builder.

Tutorials can be found here.
I have also written a fully commented example code that you can find here.

TGUI can be downloaded from my download page or from GitHub.
You will have to build TGUI with cmake, but I have provided some Getting Started tutorials for that.

I hope that someone will find this project useful.
If you have any questions, if you you find bugs or if you have any remarks then just let me know.

[Mario]

What I noticed immediately: Inconsistent style (unless that's intended to show off skinning)...

The button is rather flat with slightly rounded edges, the list box is solid with no rounding and a thick black line.
The edit box has some slight lighting/shadow effect and round edges, looking almost 3D (and not sunken like expected from most users I guess). In a similar way, the slider is really flat again and the progress bar looks completely different (also using another blue).

[mateandmetal]

looks nice!  

I think you should change

Code: [Select]

slider->m_VerticalScroll = false;

to something like

Code: [Select]

slider->disableVerticalScroll();



good work!

[texus]

I think you should change

Code:
slider->m_VerticalScroll = false;

to something like

Code:
slider->disableVerticalScroll();

It isn't really disabling something. You just say that you want a horizontal slider instead of a vertical one, but I'll think about it.

Inconsistent style

The style can be changed freely. You can use your own images. I just created these images as an example, and as you noticed I am not a good artist.
Only the listbox isn't made from an image. I'll see if I can change that so that it will look more like the rest.

looks nice!

Thanks

[Mikademus]

Checked it out and it looks very nice indeed. I would change the TGUI namespace to lowercase to conform with SFML's (sf::), also it is increasingly becoming the standard convention.

There really isn't much to add, it seems a well designed and easy to use GUI framework and I will definitely test it on!

Could you tell us a bit about your design philosophy and the main differences compared to SFGUI?

:thumbsup:

[texus]

I would change the TGUI namespace to lowercase

Ok, I will do that.

Could you tell us a bit about your design philosophy and the main differences compared to SFGUI?

I never looked at SFGUI, so I don't know the differences.
I just tried to keep TGUI it as easy as possible to use, but I am always open for suggestions on how to make it easier.

Edit:

something like

Code:
slider->disableVerticalScroll();

I will probably change it to slider->setVerticalScroll(false), but the current way will also stay possible.

[Skamer]

Nice project  

I have just a question : It require SFML 1.6 or SFML 2 ?

[texus]

It require SFML 1.6 or SFML 2 ?

It requires SFML 2.
I should have put that in the description.

[N1ghtly]

Looks really neat!

[texus]

I just published v0.3.1. Not much changed, it was just a small update.
- Namespace is now in lowercase
- Slider::m_VerticalScroll can be accessed indirectly with Slider::setVerticalScroll(bool)
- The scrollbar didn't really work like it should, the wrong behaviour has now been fixed
- Small bug fixes in EditBox and Listbox

These are my plans for the next few versions (not necessarily in this order)
- Create a text box
- Create a combo box
- Create radio button groups
- Currently when the edit box is full you can no longer add something. This should be changed.
- Some other small things like e.g. double clicking in edit box should select the whole text.

[texus]

For those who are still interested: I just released v0.3.2.
I added a combo box (which can optionally have a scrollbar) and I made some bug fixes in EditBox, ListBox and Scrollbar.

[texus]

TGUI v0.3.3 is out.



The most important thing I added were:
- Scrolling in EditBox. The text width is no longer limited.
- You can now load the objects from a file.
- Next to the .lib and .so files, I have also added .a files.

A full list of changes can be found on the changelog page.


Some may have already read it on my homepage: I am planning to make an easy drag-and-drop form builder.
I don't have much time right now and I will first have to write horizontal scrollbars, but this will be my current goal.

[Alejandro]

Hello,

You have a nice project here and I'm happy to see that there is another GUI library which for me at least is easier to use

I know it has been only 3 days, but I would like to ask how much do you think the form builder might take you ? /nothing too accurate, 1 week or a month seems reasonable for me/ This is because I love the ability to see your GUI on the fly and not hit compile for every minor adjustment of a widget.

Also I would like to say some things about the library, because this should be a two way process and people should not only want new things, but give feedback for already implemented functionality.

I looooooove the ability for skinning which is something not every GUI library can so easily achieve. I do have some questions and suggestions though:

- Can we change the font used by the GUI globally?

- When I hit the "Delete" button from the keyboard to delete text past the cursor in the edit box, nothing happens and everywhere else I think such a feature exists.

- When the arrows are pressed down and held, the cursor in the edit box doesn't move forward/back.

- The text in the edit box in the example code shows only "The tex" and I have to move the cursor to reveal everything else, while there is space in the widget where the text should be drawn, but isn't. /Also on the first run of the example I had a bug with the edit box where the cursor went out of the borders of the edit box and as I typed text, the cursor went on over the image, but unfortunately I can't recreate it again to see what could have caused it./

- IMO there should be a hover event for the items in the combo box and the scrolling list box, because otherwise the GUI seems like it is in lag or dead.

Good work with the project so far

Edit 1: Oh it occurred to me now that I have another question:
- How are we supposed to get rid of the GUI elements which we no longer need and delete them from the system, because I see that there is a Hide function, but hiding quite a lot of buttons isn't always effective if we want to gain more speed for other rendering and calculating processes?

[texus]

how much do you think the form builder might take you?

Don't hope too much for it. I would love to start with it, but I will have to write a horizontal scrollbar first. I could do this fast and leave a small bug, or I could first remove the bug, but then it will take longer before I can start with the form builder.
Also with the amount of homework I am getting, I don't think it will be finished this month.

Can we change the font used by the GUI globally?

No, but this is a good idea. I will add a setFont function to the window.

When I hit the "Delete" button from the keyboard to delete text past the cursor in the edit box, nothing happens

This is strange, the delete button should work fine.

When the arrows are pressed down and held, the cursor in the edit box doesn't move forward/back.

Are u using linux? https://github.com/SFML/SFML/issues/122

The text in the edit box in the example code shows only "The tex"

Small mistake in the example code.
When the text is set then the edit box is only one third of the size, because the last line, the SetScale, will make it three times as big.
Putting the SetScale line before the setText should solve this problem.
I am currently writing a setSize function. If you use that one instead of SetScale then this problem will disappear.

there should be a hover event for the items in the combo box and the scrolling list box

I have added it to my todo list, which is currently getting very long.

How are we supposed to get rid of the GUI elements which we no longer need

Code: [Select]

window.removeObject("objName"); // Removes one object
window.removeAllObjects(); // Removes all objects

I have started the documentation yesterday, but it will take a while before everything gets in it.

About the skinning: you can change the style of all objects by recalling the load function with a different pathname. I could put a function in window which will recall all load functions so that you can change the style with just one function.
I currently only have the Black style, so if you want to use another style then you will have to make the images by yourself.
But the major problem are EditBox, Listbox and ComboBox. You have to set the colors separately with the changeColor function.

[Blue]

hey,

i need some instructions where i have to copy the lib / object and include folder.

ps.: i use linux