-
TGUI: Texus' Graphical User Interface
Easy to use
TGUI aims to be easy to use, with only a few lines you have a fully functioning TextBox on your screen.
tgui::TextBox::Ptr textbox = tgui::TextBox::create();
textbox->setPosition(100, 50);
textbox->setSize(300, 200);
textbox->setTextSize(16);
gui.add(textbox);
Customizable
The widgets can be created by just using colors or by using images, making the look very customizable.
When widgets are created without a theme then they will use the build-in white theme (top left image). TGUI also ships with ready to use Black and BabyBlue themes (top right and bottom right images).
(https://i.imgur.com/2aPpXKV.png) (https://i.imgur.com/kMZuqMA.png)(https://i.imgur.com/uYDDExd.png) (https://i.imgur.com/qjzLT3d.png)
(https://i.imgur.com/dQdsbTX.jpg) (https://i.imgur.com/I9IVFqo.jpg)(https://i.imgur.com/xg7AgCj.jpg) (https://i.imgur.com/HU9B60H.jpg)
(click images for larger version)
Cross-platform
TGUI tries to support the same operating systems as SFML, so it supports Windows, Linux, Mac OS X and FreeBSD and provides experimental support for Raspberry Pi, Android and iOS.
(https://i.imgur.com/P3iMMPz.png)
Installation tutorials (https://tgui.eu/tutorials/latest-stable/#installation-tutorials) are available for each of these systems.
Gui Builder
A Gui Builder is included to allow easily creating and editing forms.
(https://i.imgur.com/nVIWPUf.png) (https://imgur.com/nVIWPUf)
Relative sizes and positions
Next to passing absolute values, you can specify positions and sizes relative to the parent.
checkbox->setPosition("30%", "20%");
editBox->setSize(400, "5%");
The widget position and size will automatically update when its parent resizes.
(https://i.imgur.com/SMaND8N.png)
More information
For more information about the project, check the website (https://tgui.eu) which has tutorials (https://tgui.eu/tutorials/latest-stable/), documentation (https://tgui.eu/documentation/latest-stable/annotated.html) and a few example codes (https://tgui.eu/examples/latest-stable/). Source code can be found on GitHub (https://github.com/texus/TGUI).
If you have problems with getting tgui to work or if you find bugs then please open a topic on the TGUI forum (https://forum.tgui.eu/).
Some images
(https://i.imgur.com/RaUwsqC.png) (https://i.imgur.com/uPN214u.png)
(https://i.imgur.com/IKkdnzI.png)
(https://i.imgur.com/euo8xLF.png) (https://i.imgur.com/sFCVlwf.png)
(https://i.imgur.com/qRoqmBn.png) (https://i.imgur.com/acUkCLN.png)
-
I use TGUI for my current project and I'm pretty satisfied with v0.7-alpha1. No errors or any stability issues so far.
-
I used it quite some time ago and it was a great experience :)
The only thing missing in my opinion are "layer/panel transition" effects like fadeIn fadeOut, swingIn/Out etc. They are not hard to implement as a user of the libary, nevertheless it would be a cool feature built into the library
AlexAUT
-
I wouldn't really expect things like fading to be part of a gui library. But it seems to exist in wxWidgets.
I guess I could add showWithEffect and hideWithEffect to widgets (or even just add some optional parameters for the already existing show and hide functions), I'll look into it for the beta release or perhaps even already for alpha2.
-
Well this UI library has what I need clickable images so, will probably switch over to using this one.
-
The only thing missing in my opinion are "layer/panel transition" effects like fadeIn fadeOut, swingIn/Out etc. They are not hard to implement as a user of the libary, nevertheless it would be a cool feature built into the library
Animations on show or hide have now been added to TGUI v0.7-dev (https://github.com/texus/TGUI/tree/v0.7-dev). The online documentations and tutorials will only be updated on the next alpha release though.
Example video: https://www.facebook.com/TexusGUI/videos/382657321942554
How to use it:
button->showWithEffect(tgui::ShowAnimationType::Fade, sf::milliseconds(500));
I'm planning on redesigning the animation class and moving it to the public interface in the future so that you can e.g. move a widget from one spot to another, but for now the animation class can only be accessed indirectly with the showWithEffect and hideWithEffect functions.
-
Looks nice :D
You could get some ideas from this https://github.com/libgdx/libgdx/wiki/Scene2d#actions which is in my opinion a easy to use and flexible API.
AlexAUT
-
I am using it in my project, its simple to integrate, easy to use and it works very well. Keep up the great work. :)
-
Any chance of you adding a way to change a picture, after one has already been loaded to a picture widget?
Asking cause I would love to gray out unable clickables till requirements have been met.
-
I'll add a setTexture function to the Picture class in 0.7-alpha2 which should be released this weekend.
-
I'll add a setTexture function to the Picture class in 0.7-alpha2 which should be released this weekend.
Sweet thanks. This should be alot more useful then me disabling and hiding the pictures instead like I currently am.
-
TGUI 0.7-alpha2 has been released
Tool Tip
A tool tips can now be any widget and is no longer limited to a simple text. Check the tool tip tutorial (https://tgui.eu/tutorials/v0.7/tool-tips/) for more info.
(http://i.imgur.com/ii2ZIw2.jpg) (http://i.imgur.com/bL36p8E.jpg)
Show/Hide animations
You can use showWithEffect or hideWithEffect to make widgets appear or dissapear by fading or by sliding from the sides.
(http://i.imgur.com/ANuRKr8.gif)
New theme
A TransparentGrey theme was added, I don't have any screenshots of it though. All widgets are semi-transparent in this theme and only use colors (no images).
Other changes
- The HorizontalLayout and VerticalLayout (https://tgui.eu/tutorials/v0.7/box-layouts/) classes were fixed so you can now use them to stack your widgets next to each other or below each other.
- A setOpacity function was added which allows giving any widget a certain transparency (without the limitations of the old setTransparency function).
- Text auto-sizing was improved
There will be no more releases for some time, don't expect the beta release before July/August next year. An alpha3 version will only be released if important bugs are found before then.
-
Nice and thanks for the implementation of the Animations!
Can't wait to use it in my next project
AlexAUT
-
So let me get this right for this new version
tgui::blah::Ptr = theme->load() instead of tgui:blah::Ptr wtf(*gui)
and now have to add the parts to the gui
-
If they are loaded from a theme file, yes.
The following two lines from v0.6:
tgui::Button::Ptr button(gui);
button->load("TGUI/widgets/Black.conf");
have basically been replaced with this in v0.7:
tgui::Button::Ptr button = theme->load("button");
gui.add(button);
Basically the same amount of code, but things get executed in a different order.
But some widgets don't have a theme (like Picture and Panel) and are loaded like below. Any widget can actually be loaded like this in which case it will just use the build-in White theme.
tgui::Xyz::Ptr widget = std::make_shared<tgui::Xyz>(/* optional parameters e.g. filename for Picture */);
gui.add(widget);
-
alright, so tonight I have like 30 things to change to get all my pictures working XD
-
Alright, quick question though how are callbacks now done?
-
You should just check the tutorials (https://tgui.eu/tutorials/v0.7/) to figure out how to get started.
- Introduction to signals (https://tgui.eu/tutorials/v0.7/signals-introduction/)
- Unbound optional parameters in signals (https://tgui.eu/tutorials/v0.7/signals-optional-parameters/) (limited compiler support)
- connectEx function (https://tgui.eu/tutorials/v0.7/signals-connectEx/) (alternative to optional parameters)
-
ya I got it all working now, and being able to change the textures of pictures is awesome. Can now show what pictures are disabled and which aren't.
-
TGUI 0.7.0 has been released.
The changes done after the alpha versions were mostly bug fixes though.
Although originally the plan was to release a beta version first with many new changes, I have decided to split it in two versions. The changes for the beta version were becoming too big, so these changes will eventually be released as v0.8 instead of delaying the release of 0.7 another two years.
-
What are the major changes? :)
-
Compared to 0.6, so many things have changed that I stopped writing them down. The really important ones are mentioned in the changelog (https://tgui.eu/changelog/#0.7.0), but practically everything changed during the last two years.
The biggest changes were already done with the release of 0.7-alpha1 (when this topic was created). Afterwards there have been mostly minor improvements and bug fixes. I'm sure there have to be some nice improvements in the last 150 commits, but I quickly scrolled through them yesterday without finding anything important enough to mention.
-
TGUI 0.7.1 has been released.
All textures used to be loaded from a file while only the Picture class could be constructed from an sf::Texture. There was a way to change how textures were loaded and e.g. load them all from memory but this impacted any texture that you tried to load. Now it is possible to pass an sf::Texture anywhere where you need a texture in a widget. You can even pass only part of such a texture, e.g. the following code sets the center part of a 400x300 texure in the Picture class (40 pixels from left and right and 30 pixels from top and bottom are cropped).
picture->setTexture({sfTexture, {40, 30, 320, 340}});
The Layout class could previously not handle string literals because it would cause ambiguity when passing 0. This issue has been worked around and you thus no longer need to construct an std::string by putting braces behind the strings. The following code
button->setSize({"0.6 * parent.width", "0.2 * parent.height"});
can now thus be written as
button->setSize("0.6 * parent.width", "0.2 * parent.height");
Adding new lines to the ChatBox widget was extemely slow. It should now be about 15 times faster.
-
I just taste it and feel good. If tgui is used to write desktop windowing applications
-
Hello, the tgui program running failed with "Abort trap (core dumped)" when it runs to connect() or the tgui::Theme::load calling on FreeBSD.
It is srange that the connect() call will pass without extra parameters (Only set the signal name and the callback function).
-
Could you show a minimal code example (something that I can just copy-paste and run) that gives this error?
-
Could you show a minimal code example (something that I can just copy-paste and run) that gives this error?
This happened on the example code from the tgui-0.7.1.zip and also to my own code.
Here its an example:
// main.cpp
#include <TGUI/TGUI.hpp>
#include <cstdlib>
void callback(std::string message) {
std::cerr << message << std::endl;
std::exit(EXIT_SUCCESS);
}
int main() {
sf::RenderWindow window(sf::VideoMode(640, 400), "tgui & freebsd");
tgui::Gui gui(window);
gui.setFont("/usr/local/share/fonts/dejavu/DejaVuSansMono.ttf");
auto button1 = std::make_shared<tgui::Button>();
button1->setSize(100, 30);
button1->setPosition(300, 150);
button1->setText("Click Me");
std::cerr << "d1" << std::endl;
button1->connect("ExitButton", callback, "Exit Message");
std::cerr << "d2" << std::endl;
gui.add(button1);
while (window.isOpen()) {
sf::Event event;
while (window.pollEvent(event)) {
if (event.type == sf::Event::Closed) {
window.close();
}
gui.handleEvent(event);
}
window.clear();
gui.draw();
window.display();
}
return 0;
}
// Makefile
PROG=app
SRCS=main.cpp
MAN=
LIBS=sfml-graphics gl
CXXFLAGS+=`pkgconf --cflags ${LIBS}` -std=c++1z
LDFLAGS+=`pkgconf --libs ${LIBS}` -lc++ -lm -lthr -ltgui
.include <bsd.prog.mk>
Build and Run:
$ make
$ ./app
d1
Abort trap (core dumped)
-
The first parameter to the connect function has to be the signal you want to receive. Since you want to receive the callback when the button is pressed, the first parameter has to be "Pressed" (case-insensitive) and not an arbitrary chosen name like "ExitButton".
If I run this code on linux it prints the following which is much more clear than getting "Abort trap (core dumped)":
terminate called after throwing an instance of 'tgui::Exception'
what(): cannot connect to unknown signal 'ExitButton'.
I'm starting to feel like I'm the only person who gets such a clear message when the program terminated due to an exception so I'll update the example codes soon to include a try-catch block.
-
To Texus:
OK, thank you. That's it.
-
Hi,
Just started using tgui for a project and run into a problem. I keep being told that tgui-s-d.lib is too large to push to GitHub! It is reported by git as 105.59MB, whilst the limit is 100MB. I can't quite believe that I'm the first person to run into this, so is there a solution?
-
A compiled library is not supposed to be pushed to a repository. A better solution is to manage it externally, either by providing the needed information so that your project can find it (find_package if you use CMake) or by including it as a submodule of your repository and recompiling it together with your project.
-
Also debug libraries can become quite huge, so that's not really surprising.
-
Hello. How to write the menubar callback ?
tgui::MenuBar::Ptr bar = std::make_shared<tgui::MenuBar>();
// add some menus and menu items
...
bar->connect("menuItemClicked", [](const std::string & item, int id) {
// some proccessing
}, "Edit", 1);
Why pressing any menu item will trigger the lambda callback, how to write the menu item callback?
-
The menuItemClicked is called for every menu item you click. By providing extra "Edit" and 1 parameters you are binding these parameters to the lambda function so that any function call will have these parameters. Unless you are using VS2013 (in which case you should check the connectEx function), you can leave one string parameter unbound which will then contain the item you clicked:
tgui::MenuBar::Ptr bar = std::make_shared<tgui::MenuBar>();
bar->addMenu("Edit");
bar->addMenuItem("Edit", "Copy");
bar->addMenuItem("Edit", "Paste");
//...
bar->connect("menuItemClicked", [](const std::string & item) {
if (item == "Copy") {
// some proccessing
}
else if (item == "Paste") {
// some other proccessing
}
});
-
Yes, it works fine on FreeBSD. I love tgui. 8)
-
From 0.6 to 0.7, the tgui api changes from callback to signal, so does it will be changed in the future release? Is it valued to pay more attention to the signal?
-
I'm definately not going back to the old callback system.
All TGUI 0.7.x patch releases keep a compatible api with 0.7.0 so they will all use the Signal class.
You shouldn't worry about 0.8 because it is still years away from being released, but the code in 0.8 will likely be very similar to the signal code in 0.7.
-
Hello, Texus.
There is a question in my heart for some times.
button->connect("pressed", print, std::bind(getValue));
I think this is too loose. I wish it be more strict.
See this will work too:
button->connect("pressed", print, std::bind(getValue)());
auto f = std::bind(getValue);
f is a function.
f() is a value.
We should pass a value as a parameter to print, right? Both will work. But the second one is more strict which is what I wish.
-
The connect function is given by:
template <typename Func, typename... Args>
unsigned int tgui::SignalWidgetBase::connect(const std::string& signalNames, Func func, Args... args)
I'm not sure what the purpose of disallowing a function as an argument would gain? If you need it for safety you could edit the source and ensure that "args" isn't a function (std::enable_if<> and std::is_function<>) maybe though.
-
Both forms should be allowed because they do different things.
When a value is passed, a copy of the value is stored and later passed as parameter. You could use std::ref to pass a reference to the variable though.
When the result of an std::bind is passed, the bound function will be called when the callback occurs.
So the first line will call getValue() each time the button is pressed.
The second line calls getValue() and passes the value to the connect function as a constant. No matter what getValue() would returns when the button is pressed (it not being called), the parameter of your callback function will be a constant in this case: the value it had when the connect function was called.
So you will likely want to use the first one.
-
Thanks to Ruckamongus and Texus, Right, std::bind(getValue) is a functional type passed to the signal function, and itself need another parameter which is provided by system, such as the slider changes and then click the button.
-
Many thanks for TGUI it really simple and useful UI system)
I have small question what version will be implemented TGUI RichText and RichEditBox? Wanna see in 0.8V RichText :P
-
RichEditBox or RichTextBox is not planned. They will probably only be added if someone else writes and contributes them.
RichText will be added in the future but it will probably take more than a year before I will look at it.
In case you didn't know there is code available for such a widget (RichTextLabel.hpp (https://github.com/texus/TGUI/blob/master/include/TGUI/Widgets/devel/RichTextLabel.hpp)) which is based on https://bitbucket.org/jacobalbano/sfml-richtext. You have to include "TGUI/Widgets/devel/RichTextLabel.hpp" in your code to use it. It will have to be rewritten before I accept it as part of the gui though, it hasn't been tested for a while and part of its code doesn't fit with the rest of the gui.
-
There is now a C binding (https://tgui.eu/bindings/c/) and a .Net binding (https://tgui.eu/bindings/dotnet/) available for TGUI 0.8-dev.
Note that these bindings are still experimental (they have only briefly been tested) and TGUI 0.8 itself is still in an early stage of development.
-
Awesome news! Keep it! :)
Btw. do you use TGUI yourself in some (bigger) project?
-
No, I'm too busy with TGUI and university assignments that I don't even have time for other projects :)
-
TGUI 0.7.3 has been released.
Because 0.8 is still going to be in development for a long time, I decided to make the creation of widgets slightly easier in 0.7. There are now static create functions similar to the ones in 0.8-dev (although in 0.7 they are only needed when not using a theme, in 0.8-dev themes are handled differently and you always create widgets like this).
Basically the following line
auto button = std::make_shared<tgui::Button>();
can now finally be written as follows in 0.7 as well:
auto button = tgui::Button::create();
-
TGUI 0.8.0 has been released!
An experimental gui builder has been added (again, since the form builder used to exist in early TGUI versions but was removed in 0.7 as the API wasn't stable enough yet to maintain it). This time it should be here to stay.
(https://i.imgur.com/A0MPWzF.png)
Other changes include:
- Global default text size for more consistent texts in widgets
- A theme can be made the default to use it for all new widgets
- Renderers are decoupled from widgets, making them truly shared
- BitmapButton widget to have an icon next to the button caption
- RangeSlider widget to have two thumbs on a slider
- ScrollablePanel widget to have a Panel with automatic scrollbars
- Panel widget was split in Group, RadioButtonGroup and Panel widgets
- HorizontalLayout, VerticalLayout and HorizontalWrap to arrange widgets
- Relative layouts were improved
Many more improvements have been made, but I didn't keep track of them and I'm not going to read through a 120.000 lines long diff file or read all 543 commit messages :)
-
Awesome work! :)
I should really give it try sometime.
-
Awesome, texus. I'm really glad to see 0.8dev become the main branch! I've been away from TGUI for a while but always come back to it when I have interface needs! So when is 0.9dev branch opening? :D
-
There shouldn't be a 0.9-dev branch for quite a while.
Usually by the time a new branch becomes stable, I already planned to rewrite certain parts in the next version or I even already started development of the new version locally. This is not the case this time. New features should still be added to 0.8 as long as possible.
I'm currently not spending a lot of time programming, only when bugfixes need to be made, so there may not be any really big changes in the near future for 0.8 either.
-
A lot of new features have been added to TGUI in the last 6 months:
TGUI 0.8.1
MenuBar got support for submenus and for disabling menu items.
(https://i.imgur.com/IKkdnzI.png)
TGUI 0.8.2
A new TreeView widget was added.
(https://i.imgur.com/uPN214u.png)
Changing the text styles in the ChatBox widget also became possible.
(https://i.imgur.com/acUkCLN.png)
TGUI 0.8.3
TGUI 0.8.3 brought several new features, the biggest one being the ListView which has been the most requested widget for quite a while.
(https://i.imgur.com/RaUwsqC.png)
Label also got a vertical scrollbar, TextBox got the option to use a horizontal scrollbar (as alternative to the default word-wrapping) and EditBox got the ability to set a fixed suffix behind the string (e.g. for displaying units).
(https://i.imgur.com/sFCVlwf.png) (https://i.imgur.com/euo8xLF.png) (https://i.imgur.com/o8kg0Wd.png)
Further releases
Currently there are no plans yet for what will be added in 0.8.4, it could be another release bringing new features but it could also be the start of a period with mostly bugfixes.
The changes made in the last patch releases make it clear that TGUI isn't following SemVer, that however doesn't mean that I don't care about compatibility. The TGUI 0.8.x branch will continue to be backwards compatible with earlier TGUI 0.8.x releases, but an exception to this rule is being added. Since neither the TreeView nor the ListView class received any feedback or testing during development other than my own tests, I do not want to guarantee 100% API stability for these classes. I will however still try to keep things compatible for these two widgets.
-
thanks, i really like tgui and use it all the time. one thing needed is the gui builder, or just an example on how to add all the gauges
-
Nice to see all the progress! :)
-
one thing needed is the gui builder, or just an example on how to add all the gauges
What do you mean with adding all the gauges?
Files created by the gui builder can be imported in code by executing
gui.loadWidgetsFromFile("form.txt");
The gui builder still needs a lot of work, it has been neglected a bit since it was released. This might be something that I could improve in the next version.
-
one thing needed is the gui builder, or just an example on how to add all the gauges
What do you mean with adding all the gauges?
Files created by the gui builder can be imported in code by executing
gui.loadWidgetsFromFile("form.txt");
The gui builder still needs a lot of work, it has been neglected a bit since it was released. This might be something that I could improve in the next version.
Sorry I was unclear.
What I was talking about is just how to add widgets in the gui builder itself. As an example I need to add the TABS widget, what are the files that need to update in the guibuilder project?
-
The biggest work would be creating a new TabsProperties.hpp file inside the "include" directory (the one inside the "gui-builder" directory obviously). You can have a look at other widgets (e.g. "ListBoxProperties.hpp") for examples on how this file should look. The properties needed in "updateProperty" can be found in the Tabs::load function from src/TGUI/Widgets/Tabs.cpp while the properties in the "initProperties" function also include the ones found in the Tabs::rendererChanged function.
Once you have that file, the last few changes are easy:
- Include TabsProperties.hpp in GuiBuilder.cpp
- Add the following in the GuiBuilder constructor:
m_widgetProperties["Tabs"] = std::make_unique<TabsProperties>();
- In GuiBuilder::loadToolbox, add the following to the creation of the "widgets" variable:
{"Tabs", []{ return tgui::Tabs::create(); }}
- You also need to add a file called "Tabs.png" to the resources/widget-icons folder.
-
Some photos displaying the usage of TGUI library
-
TGUI 0.8.5 has been released.
SVG support
It is now possible to uses SVG images:
(https://i.imgur.com/ulCPGXw.png)
Improved Gui Builder
The Gui Builder hadn't changed much since its release with 0.8.0, but many improvements have been added to it now. Just to mention a few:
- New start screen
- Keyboard shortcuts
- Properties now have types
- Right click popup menu
- Shows lines when widgets are aligned
- Widget hierarchy window (this was contributed)
- More widgets
(https://i.imgur.com/nVIWPUf.png) (https://imgur.com/nVIWPUf)
-
Good to see this is alive & kicking!
No kidding. Came here searching for SFML GUI, saw "last post 2019" and automatically thought "ah, yet-another-Thing-of-the-Past" but then the tiny footnote: "last edited Oct '23". And the repo shows an impressive lack of unresolved issues, no old open stale PRs (0 open, 85 merged — kudos!) and also: fresh Releases from only just a few weeks ago! All good news to me. Attempting adoption today :P
Yeehah, just to save any similar-searchers like me with an over-tendency to reflexively dismiss "aged threads" as equiv to "abandon-ware" — not always the case =)