[Lemur] Working Button example, anyone?

Somehow I can’t seem to make buttons work.
Textures are offset and display in front of the button text, I’m still confused about how clicking and focus and key handling should work, so there are too many little details and I’m not sure towards what final picture I’m actually working.
So… does anybody have a working example of a button in Lemur? The simpler, the better.

+1
No button example in sources.

I presume you mean a working example with a background, movement, etc… Otherwise just making a button is pretty easy.

Default command sets is one thing that hasn’t come to buttons yet so you can’t set them up in the style yet… and I didn’t want to do movement automatically because there are a whole ton of button use-cases where you just want it to act like a web link.

Anyway, here is a simple example of setting up a button… I should add one to the demo:

[java]
Button b = new Button( “My Button” );

// Give it a background.
Texture bevel = GuiGlobals.getInstance().loadDefaultIcon( "bevel-quad.png" );
TbtQuadBackgroundComponent bg = TbtQuadBackgroundComponent.create( bevel,
                                                                           1.0f, 8, 8, 119, 119,
                                                                           0.02f, false ); 
b.setBackground( bg );

// Make it raise and lower when clicked:
b.addCommands( ButtonAction.Down, new Command<Button>() {
            public void execute( Button b ) {
                b.move( 1, -1, 0 );
            }
        });
b.addCommands( ButtonAction.Up, new Command<Button>() {
            public void execute( Button b ) {
                b.move( -1, 1, 0 );
            }
        });

// And finally, what to actually do when clicked
b.addCommands( ButtonAction.Click, new Command<Button>() {
            public void execute( Button b ) {
                System.out.println( "CLICK!" );
            }
        });

// Alternately:
b.addClickCommands(  new Command<Button>() {
            public void execute( Button b ) {
                System.out.println( "CLICK!" );
            }
        });

[/java]

Note: those methods can take multiple commands and the intent was to always have some standard ones. I just haven’t shown any love to these yet.

Eventually the command map will be a style attribute and these could be configured by default for the style.

By the way, if you want to turn the button background into a style at least then you can do:
[java]
Styles styles = GuiGlobals.getInstance().getStyles();
Texture bevel = GuiGlobals.getInstance().loadDefaultIcon( “bevel-quad.png” );
TbtQuadBackgroundComponent bg = TbtQuadBackgroundComponent.create( bevel,
1.0f, 8, 8, 119, 119,
0.02f, false );
styles.getSelector( Button.ELEMENT_ID, “beveled” ).set( “background”, bg );
[/java]

From then on, as long as you pass “beveled” as the style for the button then it will pick up the background (and whatever other settings) automatically.

2 Likes

Note: I sprained my wrist on Sunday and it is extremely painful to type. (These posts are just about killing me as it is but I’m an addict.)

…otherwise, I’d have already jumped in and added some standard button actions. If my wrist eases up a bit tonight then I might anyway. I feel bad that buttons haven’t gotten more love but I don’t use classic “push in” buttons very often in my GUIs so far.

Awesome, thanks!
And don’t worry, I think I’m starting to get my problems sorted out. Which, not entirely unexpectedly, turned out to be a host of tiny little misconfigurations, all alike.

I suspect the background gets placed in the wrong position if the texture is larger than the button.
I can’t verify that right now; if it’s true, people might have this problem more often with large textures like bevel-quad.png.

And don’t type too much. Your wrist is far more important than anything in (helping with) programming.
Get better, and soon! :slight_smile:

@toolforger said: Awesome, thanks! And don't worry, I think I'm starting to get my problems sorted out. Which, not entirely unexpectedly, turned out to be a host of tiny little misconfigurations, all alike.

I suspect the background gets placed in the wrong position if the texture is larger than the button.
I can’t verify that right now; if it’s true, people might have this problem more often with large textures like bevel-quad.png.

And don’t type too much. Your wrist is far more important than anything in (helping with) programming.
Get better, and soon! :slight_smile:

The TbtQuad should stretch either way… so that shouldn’t be an issue. Though if it’s not properly scaled and the size gets smaller than both borders put together then it will look strange.

Yeah, I found it’s not the quad size but the scaling factor.
Which means I don’t see a use case for that parameter anymore.

@toolforger said: Yeah, I found it's not the quad size but the scaling factor. Which means I don't see a use case for that parameter anymore.

If you have an image that is 16x16 and are mapping it to a quad of 2x2 then I need to know whether to stretch the center (and fail) or just scale the whole thing down.

TbtQuad can be used in cases other than gui elements on the screen (3d scene for example) so pixel->pixel scaling is not always appropriate. The image scale determines how the image coordinates are scaled to the real quad coordinates.

…not sure I’m explaining it well.

Yes, I can understand how the scaling factor can be useful for TbtQuad.
It just doesn’t make much sense when used in a GUI context where each pixel has an 1.0f size. Yes, TbtQuadBackgroundComponent, I’m looking at you :wink: (well, it could be useful outside of a GUI context, at least in theory).

@toolforger said: Yes, I can understand how the scaling factor can be useful for TbtQuad. It just doesn't make much sense when used in a GUI context where each pixel has an 1.0f size. Yes, TbtQuadBackgroundComponent, I'm looking at you ;-) (well, it could be useful outside of a GUI context, at least in theory).

All of my real guis are in a 3D scene. For example, my paper menus are like 1 x 2 meters or something.

Also, sometimes you want to scale the border up or down and the image scale is the only way to do that.

Yes, scaling the border was the reason why I wanted to use the scaling factor.
Unfortunately, this seems to scale the overall size as well.

@toolforger said: Yes, scaling the border was the reason why I wanted to use the scaling factor. Unfortunately, this seems to scale the overall size as well.

Hmmm… scaling the border independently is not something I’ve considered. Usually the center (for me) is just a gradient or something and it doesn’t matter.

I could probably add some methods to the TbtQuad for after-the-fact border scaling or something.

I simply decided it’s not worth losing sleep about it, and made my own texture with less border.
It’s not like it’s rocket science after all :slight_smile: