Kitchen Sink

Started by billarhos, 10 June 2019, 15:00:11

billarhos

Would a kitchen sink example would be useful for future tgui users?

texus

I think it would definitely be useful.

billarhos

Ok, i 've already started.

billarhos

During adding "labels" in kitchen sink i was thinking how awesome would be if a "texture" feature exist! There isn't a "texture" for labels, correct?

texus

How would a texture of a label be displayed? Do you mean a BackgroundTexture property as alternative to the BackgroundColor?

billarhos

#5
Yes exactly, a background texture instead of background color.


Labels tab finished

billarhos


texus

I've added a TextureBackground property to the label renderer.

I really like how it looks, but I got some minor feedbacks on some parts.
- On the "Labels" tab it also says "Canvas", is that something you are still going to add there or am I missing something?
- Labels can do more than demonstrated. Maybe at the bottom you can have a label with a lot of text in it, so that it gets a vertical scrollbar. There is also the possibility for a Label to have word-wrap by setting a width without setting a maximum height (via setMaximumTextWidth), although showing the version with a scrollbar is probably more important to showcase.
- Maybe "Double click me" would be better than "Click me double"?
- The arrow buttons in the Buttons tab don't seem to have a separate hover and down states. They might look better if the entire rectangle become a little more white when hovered and only gets the black arrow when in down state.
- Maybe pressing the Button0 again should switch it back to the original state? After you clicked on them you can see what they did but it is too late to actually pay attention to it. It is arguable that it serves mostly so you can see how to do it in the code, but then you might as well not switch the text at all.
- The "Button theme2", "Button theme3" and "Button theme4" buttons are probably named that way because they are "themed" button number X, but when I saw the names I expected them to have a different theme, just like the labels. If the name was e.g. "Button 2 with theme" then it would be more clear that the number is about the button, not the theme.
- Maybe swap the location of the "Open keyboard" button and the radio buttons? It is probably just because I wasn't paying attention, but I was clicking around and suddenly I got a different keyboard as before and I didn't immediately realize that it was because of the radio buttons next to it.
- To me the "CappsOff" and "CappsOn" seem inverted. It works either way as it depends on how you interpret it: does it show the current state vs the state you are going to. I personally expected it to be the latter instead of the former.

Overall I still love how it looks and what it is becoming. Keep up the good work!

billarhos

QuoteI've added a TextureBackground property to the label renderer.
Great!

QuoteOn the "Labels" tab it also says "Canvas", is that something you are still going to add there or am I missing something?
The bottom line is painted via "tgui::Canvas"; On top i give a clue to user of what i demonstrate in each tab!
I agree with all other stuff you said but when i ll finish the code i ll make the png texture theme, so all will make sense.

I believe tomorrow i will finish the code.

billarhos


pClickableWidget = tgui::ClickableWidget::create();
pClickableWidget->setPosition(50, 620);
        pClickableWidget->setSize(250, 100);

  tgui::ToolTip::setTimeToDisplay(sf::milliseconds(1000));
tgui::ToolTip::setDistanceToMouse({ 4, 8 });

pLabelToolTip = tgui::Label::create("ClickableWidget is here!");
pLabelToolTip->setPosition(pClickableWidget->getPosition());
pClickableWidget->setToolTip(pLabelToolTip);



the above code show the tooltip all the time. Missing something?

texus

Are you calling something like "gui.add(pLabelToolTip)" somewhere by any chance?
pLabelToolTip->setPosition shouldn't be called like that. The position will be relative to the mouse.

billarhos

QuoteAre you calling something like "gui.add(pLabelToolTip)" somewhere by any chance?
YES, i remove it. Now never shows.
Commenting "pLabelToolTip->setPosition()" also didn't help.

Should i give tooltip widget position?

texus

If you added it to the widget with setTooltip then it should show up on the bottom right of your mouse cursor (4 pixels to the right and 8 pixels down in this case) if put the mouse on top of the widget and don't move it for more than a second. You shouldn't have to call pLabelToolTip->setPosition at all, unless you want to add an extra offset to the tooltip which other widgets don't have.

Is there nothing in front of the clickable widget?

billarhos

Ha, i thought that "setTimeToDisplay" has to do with how long the tooltip would shown. Sorry.! I stay still for 1000 mscs and it appeared.

I think i am down with the code. i 'll move forward to finish gui.png!

texus

Now that you mention it, it does sound like that. Maybe I should rename it to setTimeBeforeDisplay or setTimeBeforeShowing?


billarhos

While making SpinButton i found that texturearrowuppressed, texturearrowdownpressed are missing. Is there a reason?


texus

I can't think of a reason. It seems to be missing in scrollbar too.
Usually the state is called "down" instead of "pressed", but that might be unclear here.

billarhos

I have some hard times with "ScrollablePanel"


Panel {
BackgroundColor = rgba(100, 100, 100, 255);
BorderColor        = rgba(0, 0, 0 , 255);
Borders              = (1, 1, 1, 1);
OpacityDisabled = 0.3
}

ScrollablePanel {
Panel = &Panel;
OpacityDisabled = 0.3
}


If i remove Panel property is working. With panel property is crashing. Panel alone is working fine.



billarhos

I think knobs need some improvements.
When i pressed down left mouse the indicator must no be moved to the direction of mouse point but only if i start moving the mouse while it still down.
Also when i double click on them they should reset.
Also they must stop on min or max and not moving around.

texus

QuoteI have some hard times with "ScrollablePanel"
Theme files just don't work like that, you can't reference to another section (it would be nice if it was possible though, then you wouldn't have to repeat the information). It should look like this:
Code (ini) Select
ScrollablePanel {
    BackgroundColor = rgba(100, 100, 100, 255);
    BorderColor     = rgba(0, 0, 0 , 255);
    Borders         = (1, 1, 1, 1);
    OpacityDisabled = 0.3;
}


QuoteI think knobs need some improvements.
Yeah, that widget didn't get much attention, it only has minimal functionality.

I haven't worked with knobs a lot, so it is possible that I'm disagreeing with some of these things due to lack of experience, but I don't agree that the improvements you suggest should be how the knob works. Maybe such behavior should be optional and even if I decide not to make them the default I could still add an option to make them work that way.

I can think of some situations where you would want such behavior, so maybe there are just 2 different types of knobs: those that simulate real-world knobs and those that just exist to select a value.
The kind of knob I tend to think about falls in the second category (examples, other example). They react immediately on mouse down and the value follows the mouse position, even if it crosses from 100% to 0% or passes through the center of the knob from 25% to 75%.

QuoteWhen i pressed down left mouse the indicator must no be moved to the direction of mouse point but only if i start moving the mouse while it still down.
I guess this also means that you want the knob to move based on how much you move the mouse as opposed to jumping straight to the mouse position?

QuoteAlso when i double click on them they should reset.
Is this some kind of standard behavior somewhere? This could be done in user code if a DoubleClick event existed.

QuoteAlso they must stop on min or max and not moving around.
That doesn't sound so easy to implement. It means the thumb must not jump to your mouse position but follow the movements you make. In such scenario I'm not sure how the thumb should respond if you move the mouse through the center of the knob to the other side.


QuoteAlmost finished.
Looking even better.
I with I could run it in a browser and put it on the webpage. Maybe with TGUI 0.9, or maybe SFML adds support for emscripten, who knows.
Part of me still can't believe that that ListView was rendered with TGUI :)

Some more nitpicking:
- When you close the keyboard, the "Buttons" tab is no longer selected.
- In Misc2, shouldn't it say "Grid" instead of "Group"?

billarhos

I think knobs deserve a separate thread because they are so cool.. 8)


Quote- When you close the keyboard, the "Buttons" tab is no longer selected.

pTabBar->setEnabled(false);
pTabBar->setEnabled(true);


The above code kills the selected tab. When a tab bar goes disabled must not lose his selected index.

Thenk you for the ScrollablePanel info. It was so obvious that i was totally blind.



pScrollablePanelTheme = tgui::ScrollablePanel::copy(pScrollablePanel);
pScrollablePanelTheme->setRenderer(theme->getRenderer("ScrollablePanel"));
pScrollablePanelTheme->getRenderer()->setFont(*pFont);


The above code (setting new font) sets all text data in scrollpanel to lowercase.
Ha, just tested with label and is happening the same. I think is in all widgets cause they are sharing the same code.

texus

QuoteThe above code kills the selected tab. When a tab bar goes disabled must not lose his selected index.
Fixed.

QuoteThe above code (setting new font) sets all text data in scrollpanel to lowercase.
I can't reproduce it. I also don't see how the font could affect the string data. If the font you are setting has capital letters then you should create a minimal program and post it together with the font.

billarhos

#24
QuoteI can't reproduce it

My mistake. It was the font itself!!

http://www.mediafire.com/file/0dvv5r8cgfrtc2s/KitchenSink.rar/file

http://www.mediafire.com/file/ntc50fgol5a5iho/Run.rar/file

Here is the executable and the sources with vs 2015 project files.

You can tell me if i should change anything.

For instance.

SFML_libs.hpp can be removed.
defines.hpp  can be removed.
i use defineImprovedEnum.h. if that is a problem i 'll change all enums.


Oops just remember i didn't change the tgui dll in run folder with the latest one.
http://www.mediafire.com/file/3l8iblez3fmtooo/tgui.rar/file