Example: Scalable login screen

This code shows a simple login screen that scales with the window when the window is resized.
Scalable login screen output

#include <iostream>

void login(tgui::EditBox::Ptr username, tgui::EditBox::Ptr password)
    std::cout << "Username: " << username->getText() << std::endl;
    std::cout << "Password: " << password->getText() << std::endl;

void updateTextSize(tgui::GuiBase& gui)
    // Update the text size of all widgets in the gui, based on the current window height
    const float windowHeight = gui.getView().getRect().height;
    gui.setTextSize(static_cast<unsigned int>(0.07f * windowHeight)); // 7% of height

void loadWidgets(tgui::GuiBase& gui)
    // Specify an initial text size instead of using the default value

    // We want the text size to be updated when the window is resized
    gui.onViewChange([&gui]{ updateTextSize(gui); });

    // Create the background image
    // The picture is of type tgui::Picture::Ptr which is actually just a typedef for std::shared_widget<tgui::Picture>
    // The picture will fit the entire window and will scale with it
    auto picture = tgui::Picture::create("../xubuntu_bg_aluminium.jpg");
    picture->setSize({"100%", "100%"});

    // Create the username edit box
    // Similar to the picture, we set a relative position and size
    // In case it isn't obvious, the default text is the text that is displayed when the edit box is empty
    auto editBoxUsername = tgui::EditBox::create();
    editBoxUsername->setSize({"66.67%", "12.5%"});
    editBoxUsername->setPosition({"16.67%", "16.67%"});

    // Create the password edit box
    // We copy the previous edit box here and keep the same size
    auto editBoxPassword = tgui::EditBox::copy(editBoxUsername);
    editBoxPassword->setPosition({"16.67%", "41.6%"});

    // Create the login button
    auto button = tgui::Button::create("Login");
    button->setSize({"50%", "16.67%"});
    button->setPosition({"25%", "70%"});

    // Call the login function when the button is pressed and pass the edit boxes that we created as parameters
    // The "&" in front of "login" can be removed on newer compilers, but is kept here for compatibility with GCC < 8.
    button->onPress(&login, editBoxUsername, editBoxPassword);

bool runExample(tgui::GuiBase& gui)
        return true;
    catch (const tgui::Exception& e)
        std::cerr << "Failed to load TGUI widgets: " << e.what() << std::endl;
        return false;