How to make a centered label with Icon?

User Code & Projects lemur
41

You are doing it the hard way by using the constructors directly instead of the “create” factory methods.

But when you create a TbtQuad directly:
width, height… the width and height of the quad.
ie: 1, 1 means a 1 unit by 1 unit quad. 100, 100 means a 100x100 unit quad.

imageWidth, imageHeight are the size of the image you will be using in ‘pixels’… basically these are used to interpret what x1, y1, x2, y2 mean in pixel coordinates. It’s more useful to put image pixel values in here than to hand-calculate texture coordinates.

But you’ll probably be much happier just calling:
http://jmonkeyengine-contributions.github.io/Lemur/javadoc/Lemur/com/simsilica/lemur/component/TbtQuadBackgroundComponent.html#create(java.lang.String,%20float,%20int,%20int,%20int,%20int,%20float,%20boolean)

Or:
http://jmonkeyengine-contributions.github.io/Lemur/javadoc/Lemur/com/simsilica/lemur/component/TbtQuadBackgroundComponent.html#create(com.jme3.texture.Texture,%20float,%20int,%20int,%20int,%20int,%20float,%20boolean)

Since it will calculate a lot of that for you.

…and those are what is documented on the previously provided link:

42

A lot better.

Now:

public class AButton extends Node {
    Button label;
    IconComponent iconComponent;

//...
    public void setIcon(String icon) {
        label.setLocalTranslation(0, 63, 0);
        label.setFont(myFont);
        label.setFontSize(35);
        label.setTextVAlignment(VAlignment.Center);
        label.setTextHAlignment(HAlignment.Center);
        label.setBackground(TbtQuadBackgroundComponent.create("Interface/ui-menu-button.png", 1f, 50, 0, 100, 68, 0f, false));
        iconComponent = new IconComponent(icon);
        label.setIcon(iconComponent);
        label.setTextHAlignment(HAlignment.Left);
        iconComponent.setVAlignment(VAlignment.Center);
        iconComponent.setHAlignment(HAlignment.Right);
        DynamicInsetsComponent dic = new DynamicInsetsComponent(0.5f, 0.5f, 0.5f, 0.5f);
        label.setInsetsComponent(dic);
        attachChild(label);
        label.setSize(new Vector3f(500,68,0));
    }

The final setSize gets ignored, obviously. So I should attach AButton to a Container. But hey, IllegalArgumentException: Child is not GUI element.

43

AButton seems like an unnecessary class now.

But yes, you can only add GUI elements to a Container. It’s a Container for GUI elements.

44 
        Container c=new Container();
        c.setPreferredSize(new Vector3f(500,500,0));
        main.attachChild(c);
        c.setLocalTranslation(500, 800, 0);
     for (int i...) {
            AButton b = new AButton(mains[i], ACTIVE_BIG, 400);
            b.setLocalTranslation((MSGlobals.MS_WIDTH - 400 - 84) / 2, 500 - i * 70, 0);
        b.label.setBorder(b.label.getBackground());
        b.label.setBackground(new DynamicInsetsComponent(.5f, .5f, .5f, .5f));            
            c.addChild(b.label);
            //main.attachChild(b);
}
[Album] imgur.com

Why are the left and right border shrinked? (Should be round, not oval)

46

I edited

selector( "label", "glass" ) {
   insets = new Insets3f( 2, 2, 0, 2 );
   color = color(1, 0, 0, 1)     
} 
selector( "button", "glass" ) {
   insets = new Insets3f( 2, 2, 0, 2 );
      color = color(1, 0, 0, 1)     
}

But the text on the label (Button?) is still cyan-ish (should be red?)

47

Likely, they are not shrunk but stretched vertically. Probably the image scale is wrong for how big you want to make the buttons versus how big (in pixels) the tbt image is.

Note: if you want to make your own style file then it should be in src/main/resources and not in the java folders.

Could be that your style file is not being used. I don’t know where you put it, what you named it, etc…

You could try adding a prinln or throw an exception or something to see if it’s even being run.

48

I can say that is successfully loaded from your debug. Also I did

selector( "container", "glass" ) {
    background = null
}

And it did remove the background of the Container.

But I don’t know how/where to set the default color for labels and buttons (and also for active, hover state etc.)

You said it needed to be in the classpath. And besides, isn’t it compiled like a java file?

49

No. It’s run at runtime.

Depending on your build environment, sometimes if you put it in src/main/java then it will be compiled for you but that’s not what you want. (And likely it would not compile properly anyway so I guess it’s not doing that for you.)

As for why the label color isn’t changing, that’s hard to say. The styling snippet you’ve provided should do it. I don’t know what else could be wrong.

50 
selector( "label", "glass" ) {
    println("1!!!!!!!!!!!!!????????????")
   insets = new Insets3f( 2, 2, 0, 2 );
   color = color(1, 0, 0, 1)     
} 
selector( "button", "glass" ) {
    println("2!!!!!!!!!!!!!????????????")
   insets = new Insets3f( 2, 2, 0, 2 );
      color = color(1, 0, 0, 1)     
}

I also see both println. So either:

  • the property name or setting is incorrect, and therefore not applied
  • the setting is applied, but another setting overrides it with the default

Any tip? Thanks!

51

Indeed they are stretched, and by adjusting the Container size I get them the right size. However, when I have excess space I’d like it to have more vertical padding between them, rather than scaling my Button… how should I do?

52

If it were me, I’d turn on trace logging for the style package and/or after I’ve loaded the styles write some debug code to peek at the various values, dump selector attributes, etc…

Set the vertical fill of your container not to stretch things.

53 
    c.setVerticalFill(DO_NOT_STRETCH_THINGS);

Didn’t work. Seriously, I searched the javadocs and found the FillMode, but found no method on Container to set it…

54

Container myContainer = new Container(new SpringGridLayout(Axis.Y, Axis.X, FillMode.None, FillMode.Even);

55

Thanks, but didn’t work. This code gives padding after the last component, and not between components, like:

label
label
label
.
.
.

Instead I want

label
.
label
.
label

Also tried with different fill combination and got very weird result (which I guess is intended if you swap major and minor axis)

56

Mm… instead, give your buttons a DynamicInsetsComponent for their insets component.

button.setInsetsComponent(new DynamicInsetsComponent(0.5f, 0, 0.5f, 0));

Ugh… except there is a bug in DynamicInsetsComponent that I think will prevent that from working since it will also center them horizontally.

In the mean time, you could fork your own DynamicInsetsComponent that would do nothing horizontallly but center vertically or whatever.

57

Have you tried MigLayout?

Edit: So far, the only thing i couldn’t do with it is use hide mode which is based off whether a component is set to be visible like a swing component.

58

documentation?

59

Eventually, I just got rid of the Container and the layout altogether:

        b.label.setLocalTranslation((MSGlobals.MS_WIDTH - 400 - 84) / 2, 500 - i * 90, 0);
        b.label.setPreferredSize(new Vector3f(500,68,0));

Now to check the wrong colors…

60

I think I’m loading some unknown Script2 which has properties that aren’t included on my groovy:

https://pastebin.com/uK5xpeEK

Is it possible that some groovy on some library to mix with the one I’m using?

61

It’s always possible that it’s loading your local styles first for some reason… but then I’d have expected the container background nulling not to work.

I mean, it’s too bad. Cutting/pasting DynamicInsetsComponent wouldn’t have take too much more effort, really.