tooltips? Diferent buttons? Pictures instead of buttons?

Started by wmbuRn, 10 July 2013, 07:04:06

wmbuRn

Is it possible to set tooltip when you hover over button or any other widget?

Can i make my own buttons or i have to use default ones? And is it possible to change buttons to display pictures? I made some sfml application that displays 60x60 sprites [showing my team mate how the buttons should look], here is image of what i was thinking:  https://s23.postimg.org/fya019k97/this_buttons.png

So is it somehow possible to make those sprites a clickable objects? Or it is possible to make tgui buttons to look like that?

Thank you in advance
with respect
wmbuRn

wmbuRn

Ok i found black.conf and i editet some lines, and i was able to display half of picture i had in mind :) So i just need some information so i will try to add custom buttons for my project. What this means:

NormalImage_L  = "Black.png" (  0,  25,  50, 50)  << 0?, 25?, 50?,  50? I also notices that Formbuilder uses black.conf  and every change directly changes formbuilder gui. SO teach me or point me where to read how and what to edit in black.conf to get desired evect [ new buttons and items]

And i did check split image, but i am interested in loading entire picture [ since it is only 1 icon ]

texus

You can just use the Picture class instead of Button.
They both inherit from ClickableObject which makes them have the LeftMousePressed, LeftMouseReleased and LeftMouseClicked callbacks.

The numbers behind the "Black.png" is the rectangle to load from the file. If you load the whole image then they can be ommited.
The left part of the normal image of the button starts at (0, 25) in the image and has a width of 50 and a height of 50, hence "(0, 25, 50, 50)".

You shouldn't edit Black.conf. You should make a copy of it and in your code load that copy which you can freely edit.

Edit: There is a small tutorial about the config files.

Edit2: I forgot to answer the question about tooltips. This is not yet possible. I did a poll once about what widget I should add. The first two were MessageBox and MenuBar (which now exist in tgui). ToolTip and PopupMenu came 3th and 4th, but they won't be in v0.6.0. They will probably be the next widgets that will be added but they will have to wait for v0.6.1 or v0.7.

wmbuRn

Thank you. I will learn it eventualy. There is another simple problem. I tried googling it first but there is no info about it

So first [log in screen from tutorial] calls void function and display everything from there. So new screen that pop up after typing correct username and passsword. How to display new gui elements, and not the old ones? And how to call new gui elements to be drawn on new screen ?

I cant find tutorial for it either

texus

If you no longer need objects then you can use the remove function from Gui to remove them. And then you just create the new objects like you created the old ones.

But it is probably better to use panels. So you create a panel for the login screen and a panel for your other screen. In those panels you add the objects you want (just like you added them to the gui). And then you just hide all panels except the login screen. When the login button is clicked, all that you have to do is hide the panel with your login screen and show the other one.

Edit: Here is a small example of what I am trying to say:
Code (cpp) Select
#include <TGUI/TGUI.hpp>

void loadLoginScreen( tgui::Gui& gui )
{
    tgui::Panel::Ptr loginScreen(gui, "LoginScreen");
    loginScreen->setSize(800, 600);

    // Create the background image
    tgui::Picture::Ptr picture(*loginScreen);
    picture->load("xubuntu_bg_aluminium.jpg");
    picture->setSize(800, 600);

    // Create the username label
    tgui::Label::Ptr labelUsername(*loginScreen);
    labelUsername->setText("Username:");
    labelUsername->setPosition(200, 100);

    // Create the password label
    tgui::Label::Ptr labelPassword(*loginScreen);
    labelPassword->setText("Password:");
    labelPassword->setPosition(200, 250);

    // Create the username edit box
    tgui::EditBox::Ptr editBoxUsername(*loginScreen, "Username");
    editBoxUsername->load("TGUI/widgets/Black.conf");
    editBoxUsername->setSize(400, 40);
    editBoxUsername->setPosition(200, 140);

    // Create the password edit box (we will copy the previously created edit box)
    tgui::EditBox::Ptr editBoxPassword = loginScreen->copy(editBoxUsername, "Password");
    editBoxPassword->setPosition(200, 290);
    editBoxPassword->setPasswordCharacter('*');

    // Create the login button
    tgui::Button::Ptr button(*loginScreen);
    button->load("TGUI/widgets/Black.conf");
    button->setSize(260, 60);
    button->setPosition(270, 440);
    button->setText("Login");
    button->bindCallback(tgui::Button::LeftMouseClicked);
    button->setCallbackId(1);
}

void loadOtherScreen( tgui::Gui& gui )
{
    tgui::Panel::Ptr otherScreen(gui, "OtherScreen");
    otherScreen->setSize(800, 600);

    // Create the background image
    tgui::Picture::Ptr picture(*otherScreen);
    picture->load("xubuntu_bg_aluminium.jpg");
    picture->setSize(800, 600);
}

int main()
{
    // Create the window
    sf::RenderWindow window(sf::VideoMode(800, 600), "TGUI window");
    tgui::Gui gui(window);

    // Load the font (you should check the return value to make sure that it is loaded)
    gui.setGlobalFont("TGUI/fonts/DejaVuSans.ttf");

    // Load the widgets
    loadLoginScreen(gui);
    loadOtherScreen(gui);

    // The login screen is the only panel that should be visible
    gui.get("LoginScreen")->show();
    gui.get("OtherScreen")->hide();

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

            // Pass the event to all the widgets
            gui.handleEvent(event);
        }

        // The callback loop
        tgui::Callback callback;
        while (gui.pollCallback(callback))
        {
            // Make sure tha callback comes from the button
            if (callback.id == 1)
            {
                // Get the login screen
                tgui::Panel::Ptr loginScreen = gui.get("LoginScreen");

                // Get the username and password
                tgui::EditBox::Ptr editBoxUsername = loginScreen->get("Username");
                tgui::EditBox::Ptr editBoxPassword = loginScreen->get("Password");

                sf::String username = editBoxUsername->getText();
                sf::String password = editBoxPassword->getText();

                // Show the other screen
                loginScreen->hide();
                gui.get("OtherScreen")->show();
            }
        }

        window.clear();

        // Draw all created widgets
        gui.draw();

        window.display();
    }

    return EXIT_SUCCESS;
}

wmbuRn

Now that explains everything. Thank you very much texus!


btw you made little typo
it was:
editBoxPassword->setPasswordCharacter('*');

it should be:
editBoxPassword->setPasswordChar('*');

no biggi :)

texus

It wasn't a typo :D.
I changed that function yesterday.

wmbuRn


wmbuRn

So .. animations ? Simple ones. I tried


int jump = 1;
    if (jump > 0)
    {
    button->setPosition(480, 560);
    button->setPosition(480, 540);
    if (++jump == 500)
                jump = 0;
            }


i tried

button->setPosition(480, 560);
button->setPosition(480, 540);
button->setPosition(480, 560);
button->setPosition(480, 540);
// and copy past like 15 times :)

And it wont move on the Y Vector. It just load last position and stays there :)
i also used

screen.setFramelimit(30);


I know there is code for making ANimated Picture [https://tgui.eu/dcmtn/v0.6/classtgui_1_1AnimatedPicture.html] but i cant use that for Buttons [Clickable Objects]
Whoever answer just answer with yes it is possible OR no its not possible. :)

Thank you in advance
with respect
wmbuRn

texus

QuoteAnd it wont move on the Y Vector. It just load last position and stays there :)
You set the position of the widget and before it is even drawn on the screen you set another position. By the time you draw on the window the button will have already been placed on the last position. It is the same problem that you had with the shaking window. You should do something similar to only change the position of the button once every frame.

AnimatedPicture is not 'animated' as in moving, it is used when the image itself changes. So it is not useful in this situation.

wmbuRn

Yeah, i forgot to call animation on button click [ on callback.id == 3 ] so it is working now.In full :)


if (callback.id == 3)
{
jump 1;
}

// latter when callbacks are done

if (jump > 0)
            {
            tgui::Panel::Ptr mainScreen = gui.get("mainScreen");
            tgui::Button::Ptr Group1 = mainScreen->get("Group1");
            Group1->setPosition(220, 555 - rand() % 20);
            jump = jump +1;
            }
            if (jump == 20)
            {
            tgui::Panel::Ptr mainScreen = gui.get("mainScreen");
            tgui::Button::Ptr Group1 = mainScreen->get("Group1");
                jump = 0;
               Group1->setPosition(220, 555);
            }


It does animation. :)

Thank You