Lemur: mouse over button highlights it, but sometimes not?

[teique]

At lemur gui listbox, while rendering each entry cell with many buttons, most buttons work fine when we hover the mouse over them, at any region of the button, the button gets highlighted properly.
But on a few entries, if it is the currently selected entry, the button only gets highlighted if the mouse is over some letter, it will not highlight if mouse is over spaces or on blank area (after the end of the text but still within the button), and wont highlight it even if the mouse is between letters (that single dot vertical blank line between letters).

As I learned before, the lemur raycast should intercept these elements to determine what it will highlight, but it is an lemur internal thing.

I would like some clue if I could do something to make it work properly?

[pspeed]

Usually this is a sign that something’s Z-dimensions have been squashed when they shouldn’t be. At least that’s what it always turns out to be in my case. I’d have to know more about the setup to know what.

It’s a sign that the background quads that labels get (so that they are clickable outside of their letters) has been pushed behind some other quad that is also clickable (like the list box area).

[teique]

the hit target, on this stack:

PickEventSession.setCurrentHitTarget(ViewPort, Spatial, Vector2f, CollisionResult) line: 262	
PickEventSession.cursorMoved(int, int) line: 482	
MouseAppState.dispatchMotion() line: 93	
MouseAppState(BasePickState).update(float) line: 169	

(when the mouse cursor is over the button area without text of the selected listbox entry), is the top container (the one attached to the GuiNode).

(I think all these values below are correct/expected/workingProperly)
Such container is at world z=30.0 →
It’s listbox is at z=30.01 →
it’s gridpanel is at z=30.02 →
it’s selected cell is at z=30.03 →
it’s button is at z=30.04 →
it has 3 childrens:

• bitmattext (original text I guess) z=30.05
• bitmaptext (highlighted text I guess) z=31.05
• background geometry z=30.04

… I found the problem!
The “selectorArea” geometry is also at z=30.04

this code e.root.collideWith(mouseRay, results); is unable to sort the button before the “selectorArea” as they are both at 30.04. But at other cells it work properly but by pure luck! right?

The 1st result (chosen as “hit”) is a geometry where:
(ListBox) → “selectorArea”(Node) → (Panel) → “background”(geometry)

1)I guess:

1.A) now I wonder if the button z placement could consider the “selectorArea” z and be put above it? so the “selectorArea” would be at 30.04 and the button I created would be placed at 30.05 and so on?

1.B) Basically, I think a 0.01 distance gap should be always available to place the “selectorArea” always below any cell buttons and other elements we create.

1.C) Or may be, some things like the “selectorArea” could have some hint to let it be skipped on the results list?

2. Temporary workaround:

I did a workaround where instead of adding all buttons directly to the listbox cell container, I created another single base container to fill the cell container.

And after that, I added all my custom buttons into that new base container.

That made the mouse cursor work properly on non text areas, as my custom buttons were now above the “selectorArea” z order and so received the first raycast hit.

But I had to make all buttons color transparent (ex.: alpha 0.5f) so the listbox selector would be visible below them.

[pspeed]

You didn’t tell me what the thickness of any of your GUI elements is or if you’ve overridden any of that with preferred size.

Normally the stuff will lay itself out properly unless a preferred size with z = 0 exists somewhere. Either that or the background components have 0 z offsets or something.

I’d need to know more about your styles, scene setup, etc… else you would have to dump all of the positions, preferred sizes, and so on along with the component stack for each element. But that would only tell me where to look further.

If you are using the standard glass style then it’s possible that something is wrong there… but I also don’t see this in my own GUIs unless I’ve done something wrong with z offsets or sizing.

[teique]

@pspeed

You didn’t tell me what the thickness of any of your GUI elements is or if you’ve overridden any of that with preferred size.

As I remember I didnt touch them and tried to follow examples when setting things up.
I am creating a tracker to find out if something is wrong in my code. So I will scan everything plugged into GUI node for problems.

@pspeed

Normally the stuff will lay itself out properly unless a preferred size with z = 0 exists somewhere. Either that or the background components have 0 z offsets or something.

As far I checked, the local translations are always z>0.

but… lemur Panel have this constructor ex.:

public Panel( float width, float height, String style ) {
    this(true, new ElementId(ELEMENT_ID), style);
    getControl(GuiControl.class).setPreferredSize(new Vector3f(width, height, 0));
}

so setPreferredSize(new Vector3f(width, height, 0)) is this the z=0 you are talking about or is it some other Z? I mean, is the default thickness z=0?

WRONG GUESS (see my next post) In debug, I saw that the Panel (ListBox.selectorArea) that receives the raycast hit has GuiControl.lastSize.z=0 (as well as its preferredSizeOverride).

WRONG GUESS (see my next post) And my button (that should have received the hit) has the same z=0 as the selectorArea, and its preferredSizeOverride=null.

===Anyway===
both (my button and the selectorArea) were at world translation z=30.04, sometimes my button gets hit first, other times the selectorArea gets hit first, I guess it is the spatial child index that wins when the world Z are the same…

May be this ended being a bad coincidence in the calculations? as the raycast has no way to distinguish in this case.

@pspeed

I’d need to know more about your styles, scene setup, etc… else you would have to dump all of the positions, preferred sizes, and so on along with the component stack for each element. But that would only tell me where to look further.

I think this is a consistent problem, not too hard to reproduce, I will see if I get some time to create a test case.

@pspeed

If you are using the standard glass style then it’s possible that something is wrong there… but I also don’t see this in my own GUIs unless I’ve done something wrong with z offsets or sizing.

I am using my custom style, where I solely configure colors
https://github.com/AquariusPower/CommandsConsoleGUI/blob/master/src/com/github/commandsconsolegui/jmegui/lemur/console/ConsoleLemurStateI.java#L211
and font
https://github.com/AquariusPower/CommandsConsoleGUI/blob/master/src/com/github/commandsconsolegui/jmegui/console/ConsoleStateAbs.java#L2561

[teique]

I created a checker and got actual thickness to preferred sizes!
never saw it before, may be I looked at it wrong in debug…

It scans the GUI node for lemur elements.

z is the panel.getSize().z
zP is the panel.getPreferredSize().z
zL is the panel.getLocalTranslation().z
zW is the panel.getWorldTranslation().z

look for arrows ->

  z=null;zP=null;zL=0.00;zW=0.00;Node(name)=Gui Node;
   z=0.00;zP=0.00;zL=30.00;zW=30.00;Container(name)=ListDialogState_Dialog;
    z=0.00;zP=1.04;zL=0.01;zW=30.01;ListBox(name)=ListDialogState_EntriesList;
     z=0.00;zP=1.03;zL=0.01;zW=30.02;GridPanel(name)=null;
      z=null;zP=null;zL=0.00;zW=30.02;Geometry(name)=background;
      z=0.00;zP=1.02;zL=0.01;zW=30.03;Cell(name)=CellMainContainer;
       z=0.00;zP=1.01;zL=0.01;zW=30.04;Button(name)=CellButtonTree;
        z=null;zP=null;zL=1.01;zW=31.05;BitmapText(name)=null;
         z=null;zP=null;zL=0.00;zW=31.05;BitmapTextPage(name)=BitmapFont;
        z=null;zP=null;zL=0.01;zW=30.05;BitmapText(name)=null;
         z=null;zP=null;zL=0.00;zW=30.05;BitmapTextPage(name)=BitmapFont;
        z=null;zP=null;zL=0.00;zW=30.04;Geometry(name)=background;
       z=0.00;zP=1.01;zL=0.01;zW=30.04;Button(name)=CellButtonText;
        z=null;zP=null;zL=1.01;zW=31.05;BitmapText(name)=null;
         z=null;zP=null;zL=0.00;zW=31.05;BitmapTextPage(name)=BitmapFont;
        z=null;zP=null;zL=0.01;zW=30.05;BitmapText(name)=null;
         z=null;zP=null;zL=0.00;zW=30.05;BitmapTextPage(name)=BitmapFont;
        z=null;zP=null;zL=0.00;zW=30.04;Geometry(name)=background;
       z=0.00;zP=1.02;zL=0.01;zW=30.04;Container(name)=null;
        z=null;zP=null;zL=0.00;zW=30.04;Geometry(name)=background;
        z=0.00;zP=1.01;zL=0.01;zW=30.05;Button(name)=CellButtonX;
         z=null;zP=null;zL=1.01;zW=31.06;BitmapText(name)=null;
          z=null;zP=null;zL=0.00;zW=31.06;BitmapTextPage(name)=BitmapFont;
         z=null;zP=null;zL=0.01;zW=30.06;BitmapText(name)=null;
          z=null;zP=null;zL=0.00;zW=30.06;BitmapTextPage(name)=BitmapFont;
         z=null;zP=null;zL=0.00;zW=30.05;Geometry(name)=background;
        z=0.00;zP=1.01;zL=0.01;zW=30.05;Button(name)=CellButtonCfg;
         z=null;zP=null;zL=1.01;zW=31.06;BitmapText(name)=null;
          z=null;zP=null;zL=0.00;zW=31.06;BitmapTextPage(name)=BitmapFont;
         z=null;zP=null;zL=0.01;zW=30.06;BitmapText(name)=null;
          z=null;zP=null;zL=0.00;zW=30.06;BitmapTextPage(name)=BitmapFont;
         z=null;zP=null;zL=0.00;zW=30.05;Geometry(name)=background;
       z=null;zP=null;zL=0.00;zW=30.03;Geometry(name)=background;
      z=0.00;zP=1.02;zL=0.01;zW=30.03;Cell(name)=CellMainContainer;
       z=0.00;zP=1.01;zL=0.01;zW=30.04;Button(name)=CellButtonTree;
        z=null;zP=null;zL=1.01;zW=31.05;BitmapText(name)=null;
         z=null;zP=null;zL=0.00;zW=31.05;BitmapTextPage(name)=BitmapFont;
        z=null;zP=null;zL=0.01;zW=30.05;BitmapText(name)=null;
         z=null;zP=null;zL=0.00;zW=30.05;BitmapTextPage(name)=BitmapFont;
        z=null;zP=null;zL=0.00;zW=30.04;Geometry(name)=background;
       z=0.00;zP=1.01;zL=0.01;zW=30.04;Button(name)=CellButtonText;
        z=null;zP=null;zL=1.01;zW=31.05;BitmapText(name)=null;
         z=null;zP=null;zL=0.00;zW=31.05;BitmapTextPage(name)=BitmapFont;
        z=null;zP=null;zL=0.01;zW=30.05;BitmapText(name)=null;
         z=null;zP=null;zL=0.00;zW=30.05;BitmapTextPage(name)=BitmapFont;
        z=null;zP=null;zL=0.00;zW=30.04;Geometry(name)=background;
       z=0.00;zP=1.02;zL=0.01;zW=30.04;Container(name)=null;
        z=null;zP=null;zL=0.00;zW=30.04;Geometry(name)=background;
        z=0.00;zP=1.01;zL=0.01;zW=30.05;Button(name)=CellButtonX;
         z=null;zP=null;zL=1.01;zW=31.06;BitmapText(name)=null;
          z=null;zP=null;zL=0.00;zW=31.06;BitmapTextPage(name)=BitmapFont;
         z=null;zP=null;zL=0.01;zW=30.06;BitmapText(name)=null;
          z=null;zP=null;zL=0.00;zW=30.06;BitmapTextPage(name)=BitmapFont;
         z=null;zP=null;zL=0.00;zW=30.05;Geometry(name)=background;
        z=0.00;zP=1.01;zL=0.01;zW=30.05;Button(name)=CellButtonCfg;
         z=null;zP=null;zL=1.01;zW=31.06;BitmapText(name)=null;
          z=null;zP=null;zL=0.00;zW=31.06;BitmapTextPage(name)=BitmapFont;
         z=null;zP=null;zL=0.01;zW=30.06;BitmapText(name)=null;
          z=null;zP=null;zL=0.00;zW=30.06;BitmapTextPage(name)=BitmapFont;
         z=null;zP=null;zL=0.00;zW=30.05;Geometry(name)=background;
       z=null;zP=null;zL=0.00;zW=30.03;Geometry(name)=background;
      z=0.00;zP=1.02;zL=0.01;zW=30.03;Cell(name)=CellMainContainer;
       z=0.00;zP=1.01;zL=0.01;zW=30.04;Button(name)=CellButtonTree;
        z=null;zP=null;zL=1.01;zW=31.05;BitmapText(name)=null;
         z=null;zP=null;zL=0.00;zW=31.05;BitmapTextPage(name)=BitmapFont;
        z=null;zP=null;zL=0.01;zW=30.05;BitmapText(name)=null;
         z=null;zP=null;zL=0.00;zW=30.05;BitmapTextPage(name)=BitmapFont;
        z=null;zP=null;zL=0.00;zW=30.04;Geometry(name)=background;
->     z=0.00;zP=1.01;zL=0.01;zW=30.04;Button(name)=CellButtonText;
        z=null;zP=null;zL=1.01;zW=31.05;BitmapText(name)=null;
         z=null;zP=null;zL=0.00;zW=31.05;BitmapTextPage(name)=BitmapFont;
        z=null;zP=null;zL=0.01;zW=30.05;BitmapText(name)=null;
         z=null;zP=null;zL=0.00;zW=30.05;BitmapTextPage(name)=BitmapFont;
        z=null;zP=null;zL=0.00;zW=30.04;Geometry(name)=background;
       z=0.00;zP=1.02;zL=0.01;zW=30.04;Container(name)=null;
        z=null;zP=null;zL=0.00;zW=30.04;Geometry(name)=background;
        z=0.00;zP=1.01;zL=0.01;zW=30.05;Button(name)=CellButtonX;
         z=null;zP=null;zL=1.01;zW=31.06;BitmapText(name)=null;
          z=null;zP=null;zL=0.00;zW=31.06;BitmapTextPage(name)=BitmapFont;
         z=null;zP=null;zL=0.01;zW=30.06;BitmapText(name)=null;
          z=null;zP=null;zL=0.00;zW=30.06;BitmapTextPage(name)=BitmapFont;
         z=null;zP=null;zL=0.00;zW=30.05;Geometry(name)=background;
        z=0.00;zP=1.01;zL=0.01;zW=30.05;Button(name)=CellButtonCfg;
         z=null;zP=null;zL=1.01;zW=31.06;BitmapText(name)=null;
          z=null;zP=null;zL=0.00;zW=31.06;BitmapTextPage(name)=BitmapFont;
         z=null;zP=null;zL=0.01;zW=30.06;BitmapText(name)=null;
          z=null;zP=null;zL=0.00;zW=30.06;BitmapTextPage(name)=BitmapFont;
         z=null;zP=null;zL=0.00;zW=30.05;Geometry(name)=background;
       z=null;zP=null;zL=0.00;zW=30.03;Geometry(name)=background;

     z=null;zP=null;zL=0.01;zW=30.02;Node(name)=selectorArea;
->    z=0.00;zP=0.00;zL=0.02;zW=30.04;Panel(name)=null;
       z=null;zP=null;zL=0.00;zW=30.04;Geometry(name)=background;

     z=null;zP=null;zL=0.00;zW=30.01;Geometry(name)=background;

(this result is the output of my console command /CheckLemur, https://github.com/AquariusPower/CommandsConsoleGUI/blob/master/src/com/github/commandsconsolegui/jmegui/lemur/console/LemurMiscHelpersStateI.java#L580)

Almost all of these values seem correct as you explained (about thickness).
Least the Panel of the selectorArea:

z=0.00;zP=0.00;zL=0.02;zW=30.04;Panel(name)=null;

But it gets hit by the raycast, while my button is not:

z=0.00;zP=1.01;zL=0.01;zW=30.04;Button(name)=CellButtonText;

PS.: The command let me change the z thickness on the fly, but the problem still happens. I think creating the test case will be better…

[pspeed]

@teique

z=0.00;zP=0.00;zL=30.00;zW=30.00;Container(name)=ListDialogState_Dialog;

How are you creating this container?

It seems it’s had its preferred Z forced to 0 somehow so none of the components that want to take up Z space can.

For example, all label based GUI elements like Labels and Buttons (but especially buttons) should almost always have some thickness for the text shadow.

So yeah, a test case would be best probably.

Edit: and by the way, thanks for doing the legwork on this. It really helps me out.

[teique]

It turns out that I really had some setPreferredSize(), with z=0. My mistake sry…

I had to use it instead of setSize() becase whenever I use this on a dialog (any lemur element directly attached to GUI Node) the final size is never what I configured, it is always smaller. Any reason for that?
Because I ended considering the setSize() an useless option, but may be I am just not understanding how it is expected to work.
EDIT: oh… with setSize() my dialogs keep changing size depending on it’s contents (like a bigger label).

Is there any recomendation concerning thickness configuration?
I am using z=5.0f so I will be sure it was something I manually did, but may it cause some problem?

=== EDIT: ==================================
ok, I fixed it all, there is no more squashed elements.

If I use size z>1.0f, it will bug out (the selected listbox entry will not be clickable anymore), so I changed it to use only z=1.0f (I am using a method to set all Panels with setSize(), and if at next frame that size is not what I asked, I make it use setPreferredSize()).

So that initial problem persists, I still fail to click on a selected entry button where there is no font letters on it:

z is the panel.getSize().z
zP is the panel.getPreferredSize().z
zL is the panel.getLocalTranslation().z
zW is the panel.getWorldTranslation().z
look for arrows ->

(I removed all lines that didnt matter)

  z=0.99;zP=1.04;zL=0.01;zW=30.01;ListBox(name)='ListDialogState_EntriesList';

   z=0.98;zP=1.03;zL=0.01;zW=30.02;GridPanel(name)='null';
    z=null;zP=null;zL=0.00;zW=30.02;Geometry(name)='background';

    z=0.97;zP=1.02;zL=0.01;zW=30.03;Cell(name)='CellMainContainer';
->   z=0.96;zP=1.01;zL=0.01;zW=30.04;Button(name)='CellButtonText';
->    z=null;zP=null;zL=1.01;zW=31.05;BitmapText(name)='null';
       z=null;zP=null;zL=0.00;zW=31.05;BitmapTextPage(name)='BitmapFont';
      z=null;zP=null;zL=0.01;zW=30.05;BitmapText(name)='null';
       z=null;zP=null;zL=0.00;zW=30.05;BitmapTextPage(name)='BitmapFont';
      z=null;zP=null;zL=0.00;zW=30.04;Geometry(name)='background';
     z=0.96;zP=1.02;zL=0.01;zW=30.04;Container(name)='null';
      z=null;zP=null;zL=0.00;zW=30.04;Geometry(name)='background';
     z=null;zP=null;zL=0.00;zW=30.03;Geometry(name)='background';

   z=null;zP=null;zL=0.01;zW=30.02;Node(name)='selectorArea';
->  z=0.97;zP=0.97;zL=0.99;zW=31.01;Panel(name)='null';
     z=null;zP=null;zL=0.00;zW=31.01;Geometry(name)='background';

   z=null;zP=null;zL=0.00;zW=30.01;Geometry(name)='background';

The problem now seems that, when I had to force the preferred size with z=1f, the selectorArea (31.01) jumped above the Button (30.04).
So where there is no text (even on white spaces or the tiny gap between letters), the selectorArea receives the hit.
In the other hand, the BitmapText that is at 31.05, receives the hit properly.

Now I know what I have to code in the test case (if it is still required?)

[pspeed]

@teique

Now I know what I have to code in the test case (if it is still required?)

Yeah, that would save me a bunch of time.

In general, you may want to avoid calling setSize() and prefer setPreferredSize() instead. When you set that on a root component, it’s basically setting the absolute size anyway. A lot of times, though, I will ask the container what size it wants its preferred size to be before setting it… so I can keep the Z it likes best and just set the x and/or y depending on my needs.

[teique]

ok, I will see what I can do.

Btw, I did a funny workaround for now that I liked very much, I scaled Y of the selectorArea geometry to 0.1f, and now it looks like an underline of the current entry, and it is kinda cool!

Anyway, following your tip of requesting preferred size (and just re-using the Z size), the check went quite smooth again, least a few things I didnt touch: something in the Slider and the selectorArea.Panel thickness:

 z=0.00;zP=0.01;zL=0.01;zW=30.02;Slider(name)='null';
  z=0.00;zP=1.01;zL=0.01;zW=30.03;Button(name)='null';
   z=null;zP=null;zL=1.01;zW=31.04;BitmapText(name)='null';
    z=null;zP=null;zL=0.00;zW=31.04;BitmapTextPage(name)='BitmapFont';
   z=null;zP=null;zL=0.01;zW=30.04;BitmapText(name)='null';
    z=null;zP=null;zL=0.00;zW=30.04;BitmapTextPage(name)='BitmapFont';
   z=null;zP=null;zL=0.00;zW=30.03;Geometry(name)='background';
  z=0.00;zP=1.01;zL=0.01;zW=30.03;Button(name)='null';
   z=null;zP=null;zL=1.01;zW=31.04;BitmapText(name)='null';
    z=null;zP=null;zL=0.00;zW=31.04;BitmapTextPage(name)='BitmapFont';
   z=null;zP=null;zL=0.01;zW=30.04;BitmapText(name)='null';
    z=null;zP=null;zL=0.00;zW=30.04;BitmapTextPage(name)='BitmapFont';
   z=null;zP=null;zL=0.00;zW=30.03;Geometry(name)='background';
[02:11:53.955]!ERROR: lemur element Panel(name)=null thickness is squashed (z=0.0)
  z=0.00;zP=0.00;zL=0.01;zW=30.03;Panel(name)='null';
   z=null;zP=null;zL=0.00;zW=30.03;Geometry(name)='background';
  z=1.01;zP=1.01;zL=0.01;zW=30.03;Button(name)='null';
   z=null;zP=null;zL=1.01;zW=31.04;BitmapText(name)='null';
    z=null;zP=null;zL=0.00;zW=31.04;BitmapTextPage(name)='BitmapFont';
   z=null;zP=null;zL=0.01;zW=30.04;BitmapText(name)='null';
    z=null;zP=null;zL=0.00;zW=30.04;BitmapTextPage(name)='BitmapFont';
   z=null;zP=null;zL=0.00;zW=30.03;Geometry(name)='background';
  z=null;zP=null;zL=0.00;zW=30.02;Geometry(name)='background';

 z=null;zP=null;zL=0.01;zW=30.02;Node(name)='selectorArea';
[02:11:53.961]!ERROR: lemur element Panel(name)=null thickness is squashed (z=0.0)
  z=0.00;zP=0.00;zL=0.02;zW=30.04;Panel(name)='null';
   z=null;zP=null;zL=0.00;zW=30.04;Geometry(name)='background';

ok… next step: test case

thx on the tips!